advertisement
Scroll page to an element or jump to an element use to directly jump to an element that is important to the page and skip non-important element. The easiest way to do that by using html hyperlink tag that point to the element for example: <a href=#toHere . This code will bring you to an element which have ID="toHere". So how to do this with jQuery?
How to scroll page to an element using jQuery?
This is the simple jQuery code:
$(document).ready(function(){
$(".but").click(function(ev){
ev.preventDefault();
var offset = $(".here").offset().top;
$("html,body").animate({scrollTop:offset},1500);
});
});
$(".but").click(function(ev){
ev.preventDefault();
var offset = $(".here").offset().top;
$("html,body").animate({scrollTop:offset},1500);
});
});
With this jQuery code, the page will scroll to an element with CLASS="here" when an element with CLASS="but" clicked. It will scroll for 1500ms or 1,5 second.
Not just CLASS, scrolling page to an element using jQuery can work for every jQuery selectors, like ID (#) or tag. You can use this link to practice http://jsfiddle.net/PaKfL/.
Categories:
Post a Comment/Report Broken Link: