"Scroll-smoothly"
Bootstrap 3.3.0 Snippet by MohammedSwaaf

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Smoothly</title> <link rel="stylesheet" href="Style/main.css"> </head> <body> <ul class="Nav"> <li> <a href="#" data-scroll="Home">Home</a></li> <li><a href="#" data-scroll="About">About</a></li> <li><a href="#" data-scroll="Service">Service</a></li> <li><a href="#" data-scroll="Products">Products</a></li> <li><a href="#" data-scroll="Contact">Contact Us</a></li> </ul> <div id="Home"> <h1 class="wow">Home</h1> </div> <div id="About"> <h1 class="wow">About</h1> <p></p> </div> <div id="Service"> <h1 class="wow">Service</h1> </div> <div id="Products"> <h1 class="wow">Products</h1> </div> <div id="Contact"> <h1 class="wow">Contact Us</h1> </div> <script src="jquery-1.12.3.min.js"></script> <script src="main.js"></script> </body> </html>
* { padding: 0; margin: 0; } .Nav { text-align: center; background-color: grey; position: fixed; width: 100%; top:0; } .Nav li { display: inline-block; padding: 15px 20px; list-style-type: none; } .Nav li a { text-decoration: none; color: #fff; } .Nav ul { position: fixed; } div .wow { padding: 50px 0; text-align: center; height: 600px; } .wow { color: #fff; background-color: #000; }
$(document).ready(function(){ $(".Nav li a").click(function (e) { e.preventDefault(); $("html,body").animate({ scrollTop:$('#' + $(this).data("scroll")).offset().top },1000); }); });

Related: See More

Navbar With Icons
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: