"Smooth scrolling when clicking an anchor link"
Bootstrap 4.1.1 Snippet by sunil8107

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 --> </head> <body> <div class="container"> <header> <ul> <li> <a href="#1">Section1</a> </li> <li> <a href="#2">Section2</a> </li> <li> <a href="#3">Section3</a> </li> </ul> </header> <section class="section1" id="1"> <h1>Section1</h1> </section> <section class="section2" id="2"> <h1>Section2</h1> </section> <section class="section3" id="3"> <h1>Section3</h1> </section> <br> <br> <p class="text-center top_spac"> Design by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p> <br> </div> </body </html>
.container{max-width:900px; margin:auto;} header{ text-align:center; background:#dcdcdc; position:fixed; width:100%; top:0; left:0; right:0; margin:auto; } header li{ display:inline-block;} header li a{ display:inline-block; font-size:16px; color:#000; padding:10px 20px; } section{min-height:200px; padding:30px; color:#fff; margin:30px 0 ;} .section1{background:#fe0042;} .section2{background:#f48624;} .section3{background:#2ec2ff;}
$(document).on('click', 'a[href^="#"]', function (event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top -60 }, 500); });

Related: See More

Vue Light Bootstrap Dashboard PRO
Bootstrap tabs with elegant smooth design using bootstrap 4
Navbar fixed on scrolling (with transition)
parallax image scrolling

Questions / Comments: