4

I have html elements with id's assigned. Now I want to scroll to those elements. I see jQuery has a scrollTop which takes an integer value.. How do I easily just make a particular html element with an id scroll to the top? Ideally, with nice and smooth animation.

A quick search showed many scrolling plugins... if a plugin is needed for the above functionality, what's the most popular one? I'm also using jquery-ui.

2 Answers 2

10

You could use something like this to scroll to #someElement when the page loads:

$(document).ready(function() {
    $("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000); 
});

It simply animates the scrollTop property of the body element, and uses the top offset of some specific element as the position to scroll to. The animation lasts for 1000ms.

Note: it selects both html and body so it works across browsers. I'm not sure on the specifics, but some quick tests show that Chrome uses body, but Firefox and IE use html.

Here's a working example.

Sign up to request clarification or add additional context in comments.

Comments

0

Consider the following snippet:

$('#myDiv').bind('click',function(){

    var pos = $(this).offset().top,
    scrollSpeed = 2;

    for (var i = pos; i > 0; i=i-scrollSpeed) {
        $(window).scrollTop(i);
    }
}); 

It scrolling was binded to #myDiv element on click just for example. Code determines a position of #myDiv element, than calculates number of scroll steps (speed/smoothness). Than does jQuery .scrollTop() thing.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.