How to scroll page to an element using jQuery?

advertisement

One thing you must do to give a best service to your visitors is to make them easier to access the important element on a page. For example on Software-Mirrors.com, the most important element is the Download link, which is at the bottom of the page. This is where scroll page to an element really needed.

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);
    });
});

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:

Similar to How to scroll page to an element using jQuery?:

Post a Comment/Report Broken Link: