0

I am using iScroll and have 3 pages, which I load by adding/removing .hidden class. When I scroll the content on the first page and then change view, I get the next view loaded scrolled and missing the content.

How can I make it scroll to the top of the scrollable div when clicked?

I am essentially using the following code to control the views. I have chosen to do it this way because loading separate pages loads in separate tabs and is slow.

function show_info_page(){
$('div.info_page').removeClass('hidden');
$('div.main_page').addClass('hidden');
$('div.stats_page').addClass('hidden');
$('div.contact_page').addClass('hidden');
$('div.info').addClass('active');
$('div.stats').removeClass('active');
$('div.contact').removeClass('active');}
Brilliand
  • 13,404
  • 6
  • 46
  • 58
Chris Merron
  • 99
  • 1
  • 11

2 Answers2

0

You can set the position of the vertical scrollbar with scrollTop(), and the position fo the horizontal scrollbar with scrollLeft(). Example:

$('div.info_page').scrollTop(0); // Scroll to top
Brilliand
  • 13,404
  • 6
  • 46
  • 58
  • Hi thanks for your advice! I have played with that but it does nothing. Have you used iScroll before, as it has a scroller div inside a wrapper, could this have any impact? Again, thanks for any help as it is driving me crazy! – Chris Merron Jun 02 '12 at 14:05
  • I have not used iScroll before, but as a general rule, the scrollTop should be set on the element that the scrollbar is actually on. Try checking whether you're doing the right general thing by running `console.log($('div.info_page').scrollTop());` and checking your console output (it should output a positive number, if you scroll down beforehand, and you're targeting the right element). Another thing you can do is check the CSS properties that are set on the various elements - the correct target should have `overflow` set to `auto` or `scroll`. – Brilliand Jun 03 '12 at 21:46
  • I'm looking at iScroll right now - apparently the way it handles scrolling has nothing to do with the browser's built-in scrolling handling. I'll add a new answer when I figure it out. – Brilliand Jun 03 '12 at 21:48
0

iScroll has two functions to deal with this problem:

  • refresh() is for informing iScroll when the content has changed. If you call it when you switch pages, then iScroll might do exactly what you need.

  • scrollTo(0, 0, 0) explicitly tells iScroll to scroll to the top-left corner immediately. You should still call refresh() to update the height of the scrollbar, but with refresh() alone, iScroll might scroll to the bottom of the new content rather than the top.

Naturally, you should call both of these functions on the iScroll object (that was returned by the constructor).

Source: http://cubiq.org/iscroll-4

Brilliand
  • 13,404
  • 6
  • 46
  • 58