HTML
<ul>
<li class="active-menu"><a class="scroll" href="#home">Home</a></li>
<li><a class="scroll" href="#blue">Blue</a></li>
<li><a class="scroll" href="#red">Red</a></li>
<li><a class="scroll" href="#black">Black</a></li>
<li><a class="scroll" href="#orange">Orange</a></li>
</ul>
jQuery
// Smooth scrolling
var scrollLink = $('.scroll');
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
} );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top -50;
if ( sectionOffset <= scrollbarLocation ) {
$(this).parent().addClass('active-menu');//drop this class in li tag
$(this).parent().siblings().removeClass('active-menu');
}
})
})
0 responses on "Smooth Scrolling With jQuery"