CODEWITHSUNDEEP
jqueryscroll
Pascal
Pascal

Reputation: 12855

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?

Upvotes: 0

Views: 7246

Answers (6)

Shivam Sood
Shivam Sood

Reputation: 9

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/

Upvotes: 0

Samer Ata
Samer Ata

Reputation: 1027

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.

Upvotes: 0

Lab
Lab

Reputation: 1063

$("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.

Upvotes: 0

Sasidharan
Sasidharan

Reputation: 3740

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

Upvotes: 0

Bharat Soni
Bharat Soni

Reputation: 2902

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

Upvotes: 0

zzlalani
zzlalani

Reputation: 24344

You can try this

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

Upvotes: 1

Related Questions