Bootstrap Tutorial - Scroll down by clicking navbar button








The following code shows how to scroll down by clicking navbar button.

Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 - Fragment URI - jsFiddle demo by KyleMit</title>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type='text/javascript'
  src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css"
  href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){<!--  w w w  .  java 2  s  . c  o  m-->
$(function() {
    var navbarOffset = $(".navbar").height() + 10;
    var shiftWindow = function() { scrollBy(0, -navbarOffset); };
    window.addEventListener("hashchange", shiftWindow);
    if (window.location.hash) shiftWindow();
});
$("a[href^='#']").on('click', function(e) {
   e.preventDefault();
   var hash = this.hash;
   $('html, body').animate({
       scrollTop: $(this.hash).offset().top - 60
     }, 300, function(){
         window.location.hash = hash;
     });
});
});//]]>  
</script>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <!-- Header -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
          data-target=".navbar-collapse">
          <span class="icon-bar"></span> <span class="icon-bar"></span> <span
            class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#SectionID">GoToSection</a>
      </div>
      <!-- Navbar Links -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br />
  <h3 id="SectionID">Section With ID</h3>
  This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br />
  <p id="contact">Contact</p>
  This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br /> This is a test
  <br />

</body>
</html>

Click to view the demo