scroll to element with jquery

Question

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?

possible duplicate of [jQuery scroll To Element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) — Itay, Sep 06 '13 at 07:08

score 1 · Answer 1 · answered Sep 06 '13 at 07:09

1

You can try this

var p = $("#test");
var offset = p.offset();
$("body").scrollTop(offset.top);

answered Sep 06 '13 at 07:09

zzlalani

19,534
16
41
72

score 0 · Accepted Answer · answered Sep 06 '13 at 07:12

0

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

answered Sep 06 '13 at 07:12

Bharat Soni

2,419
4
19
36

Then you understood it wrongly. I want to scroll to an element which is in direction bottom of the page. At least I want to scroll down and not scrollTop. – Pascal Sep 06 '13 at 08:15
@Pascal then check second line of code... this will take you to top of that div – Bharat Soni Sep 06 '13 at 10:56

score 0 · Answer 3 · answered Sep 06 '13 at 07:13

0

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

answered Sep 06 '13 at 07:13

Sasidharan

3,432
3
15
35

score 0 · Answer 4 · answered Sep 06 '13 at 07:16

0

HTML

 <body>
        <div style="height:2500px">
            <button class="Top" id="button1" >1</button>
        </div>
            <button class="Link" id="button1" >2</button>
    </body>

Script

$('.Top').click(function () {
   $('html, body').animate({scrollTop:$(document).height()}, 'slow');
   return false;
   });

   $('.Link').click(function () {
   $('html, body').animate({scrollTop:0}, 'slow');
   return false;
   });

Follow this fiddle and see live example

http://jsfiddle.net/Ur3Dv/

answered Sep 06 '13 at 07:16

Shivam Sood

9
1

Do not forget to include jquery in your page – Shivam Sood Sep 06 '13 at 07:18
This is not my use case. I do not want to scroll down to the very bottom/the final end because with a height of 2500px you use my button2 could be at top:1000px when I then click on the button1 I do not see button2 because I am too far down at the bottom. – Pascal Sep 06 '13 at 07:24

score 0 · Answer 5 · answered Sep 06 '13 at 07:19

0

$("your element on which, if user clicks the scrolling shall proceed").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

I hope, this will sort your requirement.

answered Sep 06 '13 at 07:19

Pranay Bhardwaj

1,039
8
9

score 0 · Answer 6 · answered Jul 04 '15 at 17:54

check out my ten lines jQuery plugin (uncompressed). it do what you want and more though it is very simple

https://github.com/Samer-Al-iraqi/Simple-jQuery.scrollTo

As jQuery utility:

$.scrollTo(to, duration, func);

OR as extension to jQuery prototype:

$('selector').scrollTo(duration, func);

The to part in the first form can accept a number of pixels, jQuery selector string, end word (to scroll the end of page), an element or jQuery object.

hope it will help somebody.

scroll to element with jquery

6 Answers6