1

I have a scrollable div with a fixed height and a long list inside it. I want to scroll to top in the scrollable div when I scroll down with the long list. how should I start with this.

I tried to find any answer but all refer to using scrollTop or offset, but I just can't get this to work. I tried scrollTop on the div that is scrollable, but it is always undefined

I am using JQuery-mobile.

I have the following setup

<div id="scrollable">
  <div id="inner">
    <div id="content_wrapper">
       <div>...</div>
       <div>...</div>
       ...
    </div>
  </div>
<div>

scrollable is the scrollable container, which overflow-y is applied to.

I tried 

$('#scrollable').scrollTop(fixedvalue);
$('#scrollable').scrollTop($('$scrollable').offset());
$('#scrollable').scrollTop($('firstdivelement').offset());
$('#scrollable').scrollTop($('firstdivelement').position().top);

I am not very good with javascript.

user2412555
  • 1,055
  • 1
  • 16
  • 32
  • 2
    Include what you have tried in your question. – Axel Sep 11 '13 at 22:01
  • possible duplicate of [How to auto-scroll to end of div when data is added?](http://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added) – Valamas Sep 11 '13 at 22:08
  • In JQM, use `$.mobile.silentScroll()`. http://stackoverflow.com/questions/18338996/how-to-navigate-internally-within-same-page-using-links-in-html5-jquery-mobile/18359415#18359415 – Omar Sep 11 '13 at 22:14
  • 2
    Why not just `.scrollTop(0)`? – Itay Sep 11 '13 at 22:15
  • Which element is it that actually needs to scroll? It should be the parent that contains elements whose size sum up to be larger than the parent. In this case, I would guess it should be `#content_wrapper` and not `#scrollable`. Also, I agree that it should be `.scrollTop(0)` to scroll to the top. The value accepted is the offset from the *top* of the scrollable element. – Zhihao Sep 11 '13 at 22:17
  • scrollTop(0) does not work... – user2412555 Sep 11 '13 at 22:18
  • Provide us with a http://jsfiddle.net that shows your problem – Itay Sep 11 '13 at 22:21
  • I tried scrollTop on scrollable, content_wrapper, nothing happens, also tried $.mobile.silentScroll() doesn't work either. – user2412555 Sep 11 '13 at 22:23
  • maybe it has something to do with I am using JQM with Phonegap on iOS, and I also set position:fixed on scrollable. – user2412555 Sep 11 '13 at 22:24
  • My bad, it works now, it seem I have miss spelled selector for the div. – user2412555 Sep 11 '13 at 22:45

1 Answers1

6

For scrolling to top on page body :

$('html, body').animate({ scrollTop: (0) }, 'slow');

For scrolling to top on div :

$('#yourDivId').animate({ scrollTop: (0) }, 'slow');
Murat Yıldız
  • 11,299
  • 6
  • 63
  • 63