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.

jQuery CSS Smooth Scroll

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>&darr;</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.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.