scroll within div using jquery

Question

I have one <div> with overflow:auto. This <div> contains a <form> with a Search bar. I am displaying the records fetched, in the same form, now all I need is to scroll the <div> (where my search results start displaying) to the top of its container <div> (and not to the top of the page).

check the jsfiddle created. http://jsfiddle.net/tusharjs/wGUE2/15/

Here, I have tried a solution I found on stackoverflow, but it scrolls the desired <div id="scrollto"> to top of page and not to the top of the <div id="maincontent">.

Thanks

check the fiddle, when you inspect the element <div id="scrollto"> you will find that, it is scrolled to top. I want its top to start from the <div id="maincontent">. Clear? — tushar.dahiwale
– tushar.dahiwale, Commented Jan 17, 2014 at 7:04

Austin Mullins · Accepted Answer · 2020-09-27 01:50:42Z

7

You should use the .offset() method to get the element's actual top and subtract that from the amount to scroll.

$(document).ready( function(){
  var elem = $('#scrollto');
  if(elem)
  {
    var main = $("#maincontent"),
        t = main.offset().top;
        main.scrollTop(elem.offset().top - t);
  }
});

Here's my fork of your fiddle

It might be more impressive to animate the scroll:

main.animate({scrollTop: elem.offset().top - t}, 500);

The second parameter above is the duration in milliseconds. The updated example is here.

edited Sep 27, 2020 at 1:50

answered Jan 17, 2014 at 7:09

Austin Mullins

7,4653 gold badges35 silver badges48 bronze badges

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

2 Comments

paparush Over a year ago

Austin Mullins - your .animate() call above uses elem.offset().top but in your jsfiddle example the .animate() call uses elem.position.top()

Austin Mullins Over a year ago

@paparush Thanks for pointing that out. I updated the fiddle to match the answer. While playing with it, it looks like position() and offset() just happened to be returning the same values because there was nothing else on the page.

Collectives™ on Stack Overflow

scroll within div using jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related