-1

Hi guys so i am trying to do some js work and learn and i wanted to create a simple navbar so when the user clicks on it , it will take them to that section of the screen, which is all on one page, however the way i have done it seems very long and bad and i was wondering if there is an easier way to do it? or maybe a library that does it for you etc. If anyone could show me a tutorial or something that could help

Fiddle

html:

  <nav class="navbar navbar-default" data-spy="affix" data-offset-top="10">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#a">a</a></li>
          <li><a href="#b">b</a></li>
          <li><a href="#c">c</a></li>
          <li><a href="#d">d</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

JS:

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#navbar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#navbarr ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

css:

affix {
  top: 0;
  width: 100%
}


.affix + .section {
  margin-top: 68px;
}

.navbar {
  margin-bottom: 0px;
  left: 0;
  top: 0;
  width: 100%;
  list-style: none;
  height: 70px;
  z-index: 1
}

.navbar-nav {
  float: none;
  margin: 0;
  text-align: center
}

.navbar-nav>li {
  float: none;
  display: inline-block
}

.navbar-nav>li>a {
  line-height: 38px
}

.navbar-nav>li>a.active {
  background-color: #E7E7E7
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
  color: #333333;
  background-color: #E7E7E7
}

.navbar-toggle {
  background-color: #000000;
  background-image: none;
  border-radius: 4px;
  float: right;
  margin-bottom: 8px;
  margin-right: 15px;
  margin-top: 18px;
  padding: 9px 10px;
  position: relative
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #2DCC70
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #000000
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: transparent
}

#a{
  height: 700px; 
  background-color: Red;
}

#b{
  height: 700px; 
  background-color: blue;
}

#c{
  height: 700px; 
  background-color: yellow;
}

#d{
  height: 700px; 
  background-color: black;
}
RonTheOld
  • 727
  • 2
  • 12
  • 27

2 Answers2

1

You should be able to use this code snippet to smoothly scroll to the desired element on link click:

$("#navbar a").click(function(event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

jQuery scroll to element

Working example: https://jsfiddle.net/345jpqwo

maxhud
  • 9,261
  • 13
  • 52
  • 99
  • I seem to be trying this but i cant seem to get it work for some reason arggg – RonTheOld Oct 02 '17 at 16:45
  • As you can see from the fiddle : https://jsfiddle.net/4h04uzza/13/ , I tried something but now it seems it jumps to it and also the nav bar dosent highlight the key parts – RonTheOld Oct 02 '17 at 16:53
  • You had some syntax errors (gotta comment out that english text) and were missing the `preventDefault` call. https://jsfiddle.net/345jpqwo/ – maxhud Oct 02 '17 at 16:55
  • Ah ur amazing , just one more question, it seems the active class those is gone, so when they get to the second section b should light up and then c etc, it was working before , however now it seems to have gone – RonTheOld Oct 02 '17 at 16:58
  • Still nothing :( when you scroll it dosent go to the right element, i am trying to work on it now is well but the fiddle u sent isent working unfortunately – RonTheOld Oct 02 '17 at 17:41
  • It works if you click on it, but if you are normal scrolling it doesn't show the right active class – RonTheOld Oct 02 '17 at 17:42
  • @RonTheOld Ah - I see. You just need to add `$(document).on("scroll", onScroll);` when the document is ready and include your `onScroll` function. – maxhud Oct 02 '17 at 18:29
1

You can use this 

$('ul.navbar-nav>li').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    $('body').animate({ scrollTop: $anchor.top },1000);
    return false;
});
Amir Hossain
  • 643
  • 9
  • 23
  • This works but its not smooth scrolling which i would like, this jumps to the desired element rather then scroll down – RonTheOld Oct 02 '17 at 16:45
  • Works fine for me including animation. However you can check those links https://codepen.io/claviska/pen/cybdG https://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Amir Hossain Oct 02 '17 at 16:55