0

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?

Improve this question
1

6 Answers 6

Reset to default
1

You can try this

var p = $("#test");
var offset = p.offset();
$("body").scrollTop(offset.top);
Improve this answer
0
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);
Improve this answer
2
  • 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
    Commented Sep 6, 2013 at 8:15
  • @Pascal then check second line of code... this will take you to top of that div
    – Bharat Soni
    Commented Sep 6, 2013 at 10:56
0 
$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 2000);
});
Improve this answer
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.

Improve this answer
0

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.

Improve this answer
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/

Improve this answer
2
  • Do not forget to include jquery in your page
    – Shivam Sood
    Commented Sep 6, 2013 at 7: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
    Commented Sep 6, 2013 at 7:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.