jQuery CSS smooth scroll (Nav Active Classes + Nav Fade-on-scroll)
Smooth scroll help to navigate one page website with some cool scroll effect. Smooth scroll slide one section to other section in some fade effect which create nice view for page. It make default scroll to more advance and dynamic.
HTML
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'> <nav class="navigation" id="mainNav"> <a class="navigation__link" href="#1">Back to top</a> <a class="navigation__link" href="#2">Section 2</a> <a class="navigation__link" href="#3">Section 3</a> <a class="navigation__link" href="#4">Section 4</a> </nav> <div class="page-section hero" id="1"> <h1>Smooth Scrolling, Disappearing Nav, and Active Nav Class</h1> <h1>↓</h1> </div> <div class="page-section" id="2"> <h1>Section Two</h1> </div> <div class="page-section" id="3"> <h1>Section Three</h1> </div> <div class="page-section" id="4"> <h1>Section Four</h1> </div> |
CSS
* { font-family: 'Lato', sans-serif; font-weight: 300; transition: all .2s ease; } html, body { height: 100%; text-align: center; } h1 { font-size: 64px; } .page-section { height: 480px; padding: 3em; height: 100%; background: linear-gradient(45deg, #232526 10%, #414345 90%); color: white; &.hero { background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%); } } .navigation { position: fixed; width: 100%; background-color: #43cea2; color: #ddd; &__link { color: #efe; text-decoration: none; display: inline-block; padding: 1em; font-weight: 400; &.active { color: white; background-color: rgba(0,0,0,0.1); } } } |
JS
$(document).ready(function() { $('a[href*=#]').bind('click', function(e) { e.preventDefault(); // prevent hard jump, the default behavior var target = $(this).attr("href"); // Set the target as variable // perform animated scrolling by getting top-position of target-element and set it as scroll target $('html, body').stop().animate({ scrollTop: $(target).offset().top }, 600, function() { location.hash = target; //attach the hash (#jumptarget) to the pageurl }); return false; }); }); $(window).scroll(function() { var scrollDistance = $(window).scrollTop(); // Show/hide menu on scroll if (scrollDistance >= 850) { $('nav').fadeIn("fast"); } else { $('nav').fadeOut("fast"); } // Assign active class to nav links while scolling $('.page-section').each(function(i) { if ($(this).position().top <= scrollDistance) { $('.navigation a.active').removeClass('active'); $('.navigation a').eq(i).addClass('active'); } }); }).scroll(); |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by eksch. Visit their official repository for more information and follow for future updates.