87,904
社区成员
发帖
与我相关
我的任务
分享iscroll多个页面滚动条重新定位的问题
问题：切换页面，滚动条无法回到顶部。
iscroll4的各种参数看了很久，没有找到好的解决方法，请教下各位大神，这段代码是哪里有问题？
iscroll4的各种参数看了很久，没有找到好的解决方法，请教下各位大神，这段代码是哪里有问题？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
$('li' , $('#options')).click(function(){
$('#settings').html($(this).html());
$('ul[id^=demo]' , $('#list')).hide();
$('.cur' , $('#options')).removeClass('cur').addClass('navlink');
$('#demo'+ ($(this).index()+1)).show();
$(this).removeClass('navlink').toggleClass("cur");
$('#options').slideUp();
var myscroll;
function loaded(){
myscroll=iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
});
});
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
li{ list-style:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;}
#settings {background: #c40000 ;width: 110px; height:69px; float:right; position:fixed; top:0; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:69px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
#wrapper {position:absolute;z-index:1;top:69px; bottom:0; left:0;width:100%;background:#f3f3f3;overflow:auto;}
.list{ position:absolute; top:0; font-size:20px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li class="cur">选项1</li>
<li class="navlink">选项2</li>
<li class="navlink">选项3</li>
</ul>
<article id="wrapper">
<div id="list">
<ul id="demo1" style="display:block;">
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
</ul>
<ul id="demo2" style="display:none;">
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
<li>bbbbbbb</li>
</ul>
<ul id="demo3" style="display:none;">
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
<li>cccccccccc</li>
</ul>
</div>
</article>
</body>
</html>
...全文
请发表友善的回复…
发表回复
哈皮玩 2014-03-09
- 打赏
- 举报
受各位大仙的启发，改了下楼主的例子，同时也解决了楼主问的问题。请各位验证！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
<title>首页</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var items = [30,50,100];
var myScroll = new iScroll('wrapper', {checkDOMChanges:true});
$('#options').hide();
$('#settings').click(function () {
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
$('li', $('#options')).click(function () {
$('#settings').html($(this).html());
$('ul[id^=demo]', $('#list')).hide();
$('.cur', $('#options')).removeClass('cur').addClass('navlink');
var idx = $(this).index() + 2;
var demo = $('#demo' + idx);
if (demo.length == 0) {
var ul = $('<ul id="demo' + idx + '"></ul>');
var html = '';
for (i = 0; i < items[idx - 2]; i++) {
html += '<li>'+(idx - 2)+'：'+ i +'</li>';
}
ul.append(html);
$('#list').append(ul);
} else {
demo.show();
}
$(this).removeClass('navlink').toggleClass("cur");
$('#options').slideUp();
myScroll.scrollTo(0, 0, 100);
});
});
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
li{ list-style:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;}
#settings {background: #c40000 ;width: 110px; height:69px; float:right; position:fixed; top:0; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:69px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
#wrapper {position:absolute;z-index:1;top:69px; bottom:0; left:0;width:100%;background:#f3f3f3;overflow:auto;}
.list{ position:absolute; top:0; font-size:20px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li class="cur">选项1</li>
<li class="navlink">选项2</li>
<li class="navlink">选项3</li>
</ul>
<article id="wrapper">
<div id="list">
<ul id="demo1" style="display:block;">
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
</ul>
</div>
</article>
</body>
</html>
yimengyuanyun 2014-01-07
- 打赏
- 举报
我能不能请教一下，3个ul列表长度都不一样，c拉到后面就空白了，如果想让其高度按照其内容变化，可以吗？
shuijing2486 2013-03-18
- 打赏
- 举报
果然是缓存问题！！！！谢谢bb！！！
bbjbepzz 2013-03-18
- 打赏
- 举报
你清理一下缓存试下，我这边测试没有问题。
Go 旅城通票 2013-03-17
- 打赏
- 举报
可能是标签的问题。。用attr属性设置不行。。改这样的可以
$('#options').slideUp();
$('#wrapper').get(0).scrollTop=0
shuijing2486 2013-03-17
- 打赏
- 举报
这个问题还是存在啊。
bbjbepzz 2013-03-13
- 打赏
- 举报
$(document).ready(function(){
var myScroll = new iScroll('wrapper');
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
$('li' , $('#options')).click(function(){
$('#settings').html($(this).html());
$('ul[id^=demo]' , $('#list')).hide();
$('.cur' , $('#options')).removeClass('cur').addClass('navlink');
$('#demo'+ ($(this).index()+1)).show();
$(this).removeClass('navlink').toggleClass("cur");
$('#options').slideUp();
myScroll.scrollTo(0,0,100);
});
});
bbjbepzz 2013-03-12
- 打赏
- 举报
红色的加上
$('li' , $('#options')).click(function(){
$('#settings').html($(this).html());
$('ul[id^=demo]' , $('#list')).hide();
$('.cur' , $('#options')).removeClass('cur').addClass('navlink');
$('#demo'+ ($(this).index()+1)).show();
$(this).removeClass('navlink').toggleClass("cur");
$('#options').slideUp();
$('#wrapper').scrollTop(0);
});
