Codehints | Smooth Scrolling To Internal Links With jQuery

Smooth Scrolling To Internal Links With jQuery

Anish

Jun 19^th, 2014

Jquery

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
				var target = $(this.hash);
					target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
					if (target.length) {
						$('html,body').animate({
						scrollTop: target.offset().top 
					}, 1000);
					return false;
					}
				}
	});
});

<a href=”#services”>Jump to services</a>

<div id=”services”>

</div>

Active class on mouse scroll

var aChildren = $("ul.anchor-list li").children(); // find the a children of the list items
		var aArray = []; // create the empty aArray
		for (var i=0; i &lt; aChildren.length; i++) {    
		var aChild = aChildren[i];
		var ahref = $(aChild).attr('href');
			aArray.push(ahref);
		} // this for loop fills the aArray with attribute href values
		
		
		$(window).scroll(function(){
			var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
			var windowHeight = $(window).height(); // get the height of the window
			var docHeight = $(document).height();
	
			for (var i=0; i &lt; aArray.length; i++) { 				var theID = aArray[i]; 				var divPos = $(theID).offset().top; // get the offset of the div from the top of page 				var divHeight = $(theID).height(); // get the height of the div in question 				if (windowPos &gt;= divPos &amp;&amp; windowPos &lt; (divPos + divHeight)) {
					$("a[href='" + theID + "']").parent().addClass("active");
				} else {
					$("a[href='" + theID + "']").parent().removeClass("active");
				}
			}
	
			if(windowPos + windowHeight == docHeight) {
				if (!$("ul.anchor-list li:last-child a").hasClass("active")) {
					var navActiveCurrent = $(".active").attr("href");
					$("a[href='" + navActiveCurrent + "']").removeClass("active");
					$("ul.anchor-list li:last-child a").addClass("active");
				}
			}
		});

Website