87,916
社区成员
发帖
与我相关
我的任务
分享JS如何控制滚动条
内容:最近在研究页面的滚动条,我想通过JS来控制滚动条进行上下移动.实现的效果是当我点击一个页面上的按钮,滚动条能滑动对应的页面.效果上可以参考http://icaper.net/ ,向各位高手请教实现的机制和方法.
...全文
请发表友善的回复…
发表回复
撒哈拉的绿洲 2014-08-25
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
span{
position:fixed;
right:10px;
padding:20px;
}
</style>
<script type="text/javascript">
var p=null;
var _top=0;
function init(){
var arg=arguments;
var de=document.documentElement||document.body;
var screenHeight=window.innerHeight||de.clientHeight;
arg.callee.height=screenHeight;
arg.callee.index=0;
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.height=screenHeight+'px';
}
var spans=document.getElementsByTagName('span');
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
arg.callee.index=this.innerHTML-1;
scroll();
}
}
}
function setScrollTop(){
document.documentElement.scrollTop=_top;
document.body.scrollTop=_top;
p=window.setTimeout(scroll,50);
}
function scroll(){
if(p){
window.clearTimeout(p);
p=null;
}
if(_top>init.index*init.height){
_top--;
setScrollTop();
}else if(_top<init.index*init.height){
_top++;
setScrollTop();
}else{
window.clearTimeout(p);
p=null;
}
}
window.onload=function(){
init();
}
</script>
</head>
<body>
<span style="top:50px;">1</span>
<span style="top:80px;">2</span>
<span style="top:110px;">3</span>
<div style="background-color:#F00"></div>
<div style="background-color:#0F0"></div>
<div style="background-color:#00F"></div>
</body>
</html>
yjxf8285 2014-07-30
- 打赏
- 举报
我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
参考地址：http://liuxiaofan.com/2013/12/18/1617.html
绿了芭蕉-红了樱桃 2014-07-30
- 打赏
- 举报
这个效果是可以,但是后面会跟一个Id
绿了芭蕉-红了樱桃 2014-07-30
- 打赏
- 举报
谢谢
绿了芭蕉-红了樱桃 2014-07-30
- 打赏
- 举报
谢谢
天雷舞风hehe 2014-07-30
- 打赏
- 举报
可以直接用href="#跳到的id"
似梦飞花 2014-07-29
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
span{
position:fixed;
right:10px;
padding:20px;
}
</style>
<script type="text/javascript">
var p=null;
var _top=0;
function init(){
var arg=arguments;
var de=document.documentElement||document.body;
var screenHeight=window.innerHeight||de.clientHeight;
arg.callee.height=screenHeight;
arg.callee.index=0;
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.height=screenHeight+'px';
}
var spans=document.getElementsByTagName('span');
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
arg.callee.index=this.innerHTML-1;
scroll();
}
}
}
function setScrollTop(){
document.documentElement.scrollTop=_top;
document.body.scrollTop=_top;
p=window.setTimeout(scroll,50);
}
function scroll(){
if(p){
window.clearTimeout(p);
p=null;
}
if(_top>init.index*init.height){
_top--;
setScrollTop();
}else if(_top<init.index*init.height){
_top++;
setScrollTop();
}else{
window.clearTimeout(p);
p=null;
}
}
window.onload=function(){
init();
}
</script>
</head>
<body>
<span style="top:50px;">1</span>
<span style="top:80px;">2</span>
<span style="top:110px;">3</span>
<div style="background-color:#F00"></div>
<div style="background-color:#0F0"></div>
<div style="background-color:#00F"></div>
</body>
</html>
自己计算下
