Create A Scrolling Anchor Link Alongside Jquery

Very simply put, this volition business office similar a normal internal anchor link or named anchor link, but volition scroll to the specified goal instead of only jumping there. It’s a actually easy-to-implement together with awesome matter to add together to close whatever website.

I’m going to outflow correct into it.

The HTML
All that is needed for this instance is an chemical cistron to click, together with an chemical cistron to scroll to.

<a id="scroll">Click hither to scroll</a>  <img src="images/cat.png" alt=" this volition business office similar a normal internal anchor link or named anchor link Create a scrolling anchor link alongside jQuery" />  

I’ve decided to scroll to an picture of a random cat, withal I intend this would last most useful for something similar a tabular array of contents.

The jQuery/Javascript
We volition last using the click() event, animate effect, scrollTop() manipulation together with outset manipulation.

 // When the Document Object Model is gear upward jQuery(document).ready(function(){ // 'catTopPosition' is the sum of pixels #cat // is from the peak of the document var catTopPosition = jQuery('#cat').offset().top;  // When #scroll is clicked jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow'); // Stop the link from acting similar a normal anchor link supply false; }); }); 

Fairly uncomplicated together with guide frontward jQuery.
Note: jQuery('html, body') is necessary for cross-browser compatibility.
Demo
Source: http://css-plus.com/2010/11/create-a-scrolling-anchor-link-with-jquery/


Sumber http://developer-paradize.blogspot.com