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.

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.

• javascript
• jquery
• jquery-mobile

• 2 Include what you have tried in your question. – Axel Commented Sep 11, 2013 at 22:01
• possible duplicate of How to auto-scroll to end of div when data is added? – Valamas Commented Sep 11, 2013 at 22:08
• In JQM, use $.mobile.silentScroll(). stackoverflow./questions/18338996/… – Omar Commented Sep 11, 2013 at 22:14
• 2 Why not just .scrollTop(0)? – Itay Commented Sep 11, 2013 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 Commented Sep 11, 2013 at 22:17

1 Answer 1

For scrolling to top on page body :

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

For scrolling to top on div :

$('#yourDivId').animate({ scrollTop: (0) }, 'slow');