<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 ----------> <!--Start Nav--> <ul class="navbar"> <li><a href="#" data-scroll="Home">Home</a></li> <li><a href="#" data-scroll="About-Us">About Us</a></li> <li><a href="#" data-scroll="Services">Services</a></li> <li><a href="#" data-scroll="Products">Products</a></li> <li><a href="#" data-scroll="Contact-Us">Contact Us</a></li> </ul> <!--End Nav--> <!--Start Section--> <div id="Home" class="block"> <h2> Home </h2> </div> <div id="About-Us" class="block"> <h2> About Us </h2> </div> <div id="Services" class="block"> <h2> Services </h2> </div> <div id="Products" class="block"> <h2> Products </h2> </div> <div id="Contact-Us" class="block"> <h2> Contact Us </h2> </div> <!---End Section---> <!---srart scroll To Top---> <a class="scroll-top" href="#"> <i class="fas fa-chevron-up"></i> </a> <!---End scroll To Top--->

*{ margin: 0; padding: 0 } body{ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Start Scroll TO Top*/ .scroll-top{ background-color: #333; color: white; display: inline-block; padding:2px 5px; position: fixed; bottom: 10px; right: 10px; display: none } /* End Scroll TO Top*/ /*-Start Nav--*/ .navbar{ list-style: none; margin: 0; padding:5px; background-color: rgba(0, 0, 0,.7); text-align: center; position: fixed; top: 0; width: 100% } .navbar li{ display: inline-block; padding: 10px } .navbar li a{ color: #eee; text-decoration: none } .navbar li a.active { color: #ffea00; } /*-End Nav--*/ /* start section*/ .block{ height: 600px; background-color: #eee; margin-bottom: 20px; padding: 60px 0; text-align: center } /* End section*/

$(function(){ 'use strict'; //Calculate Body Padding// $('body').css('paddingTop',$('.navbar').innerHeight()); //Scroll To Element// $('.navbar li a').click(function(e){ e.preventDefault(); $('html,body').animate({ scrollTop:$('#' + $(this).data('scroll')).offset().top+1 },2000); }); //Add Active Class// $('.navbar li a').click(function(){ // $('.navbar a').removeClass('active'); // $(this).addClass('active');// $(this).addClass('active').parent().siblings().find('a').removeClass('active'); }); //Sync navbar With Sections// $(window).scroll(function(){ $('.block').each(function(){ if($(window).scrollTop() > $(this).offset().top){ console.log($(this).attr('id')); var blockID = $(this).attr('id'); $('.navbar a').removeClass('active'); $('.navbar li a[data-scroll="' +blockID+ '"]').addClass('active'); } }); }); //Scroll To Top Button// var scrolltotop=$(".scroll-top"); $(window).scroll(function(){ if($(window).scrollTop() >= 1000){ console.log("Passed 1000px"); scrolltotop.fadeIn(); }else{ scrolltotop.fadeOut(); } }); scrolltotop.click(function(e){ e.preventDefault(); $('html,body').animate({ scrollTop:0 },2000); }); });