使用iScroll中的添加/删除隐藏类的javascript页面顶部

Question

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

Answer 1

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

Answer 2

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