"Smooth scrolling using Bootstrap & jQuery"
Bootstrap 4.1.1 Snippet by AdilMuhammad93

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <ul class="nav fixed-top"> <li class="nav-item active"> <a class="nav-link scroll" href="#one">One</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#two">Two</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#three">Three</a> </li> <li class="nav-item"> <a class="nav-link scroll" href="#four">Four</a> </li> </ul> <div class="jumbotron-fluid text-center one" id="one"> <span class="display-3">One</span> </div> <div class="jumbotron-fluid text-center two" id="two"> <span class="display-3">Two</span> </div> <div class="jumbotron-fluid text-center three" id="three"> <span class="display-3">Three</span> </div> <div class="jumbotron-fluid text-center four" id="four"> <span class="display-3">Four</span> </div> </div>
*{ margin:0; padding:0; } .container-fluid{ margin:0; padding:0; } .jumbotron-fluid{ width:100%; height:100vh; overflow:hidden; } .nav{ background:#fff; } .nav-item.active .nav-link{ color:#cb356b; } .display-3{ color:#fff; display:block; margin-top:30px; } .one{ background: #06beb6; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #48b1bf, #06beb6); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .two{ background: #642B73; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #C6426E, #642B73); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .three{ background: #36D1DC; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .four{ background: #CB356B; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #BD3F32, #CB356B); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #BD3F32, #CB356B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
$(document).ready(function(){ let scroll_link = $('.scroll'); //smooth scrolling ----------------------- scroll_link.click(function(e){ e.preventDefault(); let url = $('body').find($(this).attr('href')).offset().top; $('html, body').animate({ scrollTop : url },700); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); return false; }); });

Related: See More


Questions / Comments: