JS如何控制滚动条

时间：2021-03-08 05:27:20
内容:最近在研究页面的滚动条,我想通过JS来控制滚动条进行上下移动.实现的效果是当我点击一个页面上的按钮,滚动条能滑动对应的页面.效果上可以参考http://icaper.net/ ,向各位高手请教实现的机制和方法.

7 个解决方案

#1

<!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>
自己计算下

#2

我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
参考地址：http://liuxiaofan.com/2013/12/18/1617.html

#3

可以直接用href="#跳到的id"

#4

引用 1 楼 zzgzzg00 的回复:
<!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>
自己计算下

谢谢

#5

引用 2 楼 yjxf8285 的回复:
我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
参考地址：http://liuxiaofan.com/2013/12/18/1617.html


谢谢

#6

引用 3 楼 xiongsisi1043 的回复:
可以直接用href="#跳到的id"

这个效果是可以,但是后面会跟一个Id

#7

<!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>

#1

<!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>
自己计算下

#2

我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
参考地址：http://liuxiaofan.com/2013/12/18/1617.html

#3

可以直接用href="#跳到的id"

#4

引用 1 楼 zzgzzg00 的回复:
<!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>
自己计算下

谢谢

#5

引用 2 楼 yjxf8285 的回复:
我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
参考地址：http://liuxiaofan.com/2013/12/18/1617.html


谢谢

#6

引用 3 楼 xiongsisi1043 的回复:
可以直接用href="#跳到的id"

这个效果是可以,但是后面会跟一个Id

#7

<!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>
标签：

相关文章