iscroll多个页面滚动条重新定位的问题 本帖最后由 shuijing2486 于 2013-03-12 19:51:22 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 红色的加上$('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); }); $(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); }); }); 可能是标签的问题。。用attr属性设置不行。。改这样的可以$('#options').slideUp();$('#wrapper').get(0).scrollTop=0 我能不能请教一下,3个ul列表长度都不一样,c拉到后面就空白了,如果想让其高度按照其内容变化,可以吗? 受各位大仙的启发,改了下楼主的例子,同时也解决了楼主问的问题。请各位验证!<!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> 关于JS对比时间 请教 [分享兼散分]一些不错的JS代码 哪个帮我解释一下这几行代码,详细点! 鼠标移动改变单元格背景颜色。 这个网站在什么地方降低IE的安全级别? 那种用SELECT选择图象,而且动态显示你选择的图象的JS谁有? 关于在IE6中无法运行IEWebBrowser组件的execWB方法 如何延迟? 你能来看看吗--一个关于文件上传的问题!!! 求助关于Chrome跨域的问题 大家帮我看下,为什么我的复选框不出现?
$('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);
});
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);
});
});
$('#options').slideUp();
$('#wrapper').get(0).scrollTop=0
<!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>