Search code examples
jqueryscroll

scroll to element with jquery


There is the scrollTop method in jquery but I want a scrollBottom method.

My use case is that the user clicks on the top right corner on an element and somewhere deep down the website there is the element #test I want to do a scroll to bottom so the user can see this element.

How would you do that? I know there is a jquery scrollTo plugin is it recommened to use? Such a simple task?...

UPDATE

I have updated my question with a code sample which is taken partly from the above 'jquery scroll to element' dupe vote:

var container = $('#view');
var scrollTo = $('#test');

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

These are the values I get from debugging and the scroll bottom does not work, the screen stands still nothing moves.

scrollTo.offset().top => 0
container.offset().top => 274.75
container.scrollTop() => 0

My element row1 is so I guess at top 1500px but probably the problem is it has no top value... How can I solve that?


Solution

  • what I've understood from your question is, you want to scroll to the bottom of the page, so you could use this:

    $("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
    

    if you want to scroll to particular ID the you can use this:

    $("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);