<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="text-center">Smooth inline href</h2> <div class="col-md-12 list-online"> <a class="btn btn-default" href="#inline1">link1</a> <a class="btn btn-info" href="#inline2">link2</a> <a class="btn btn-warning" href="#inline3">link3</a> <a class="btn btn-danger" href="#inline4">link4</a> <a class="btn btn-success" href="#inline5">link5</a> <div id="inline1"> <h1>link1</h1> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> </div> <div id="inline2"> <h1>link2</h1> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> </div> <div id="inline3"> <h1>link3</h1> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> </div> <div id="inline4"> <h1>link4</h1> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> </div> <div id="inline5"> <h1>link5</h1> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> <p>THis is test texts</p> </div> </div> </div> </div>

function scrollNav() { $('.list-online a, ').click(function(){ //Toggle Class //Animate $('html, body').stop().animate({ scrollTop: $( $(this).attr('href') ).offset().top - 160 }, 400); return false; }); $('.scrollTop a').scrollTop(); } scrollNav();