您的位置：首页 > Web前端 > JavaScript

js实现点击置顶

2017-12-01 11:06 155 查看

js实点击置顶的功能
需要掌握的知识点
1、js中的scrollBy() 方法
把内容移动指定的尺寸，单位是像素
scrollBy(x,y)
x 必填 —— 内容向右移动的尺寸
y 必填 —— 内容向下移动的尺寸
2、js中的scrollTop()方法
获得元素滚动条内的顶部隐藏部分的高度
scrollTop属性只有DOM元素才有，

window/document没有。
用法1：获取值 var top = element.scrollTop;
//返回数字，单位像素
用法2：设置值 element.scrollTop = 200;
3、js中的setInterval()方法
setInterval动作的作用是在播放动画的时，
每隔一定时间就调用函数，方法或对象。
可以更新来自数据库的变量或更新时间显示。
setInterval(function,interval[,arg1,arg2,......argn])
标准动作面板中setInterval函数的默认语法
setInterval(object,methodName,interval[,arg1,arg2,.....argn])
在专家模式动作中使用的方法。
使用格式
setInterval('函数名',时间);

时间的单位是毫秒隔指定的时间执行一次函数
clearInterval(函数名);
清除setInterval() 方法
4、js实现点击置顶的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>点击置顶</title>
</head>
<body>
<div style="height:200px; width:200px; background:pink; margin:0px auto;"></div>
111111111
111111111
111111111
111111111
111111111
111111111
111111111
111111111
111111111
111111111
<button onclick="Topfun()">TOP</button>
<script type="text/javascript">
var four;
function Topfun(){
four=setInterval(FourscrollBy,10);

}
function FourscrollBy(eachHeight){
if(document.documentElement && document.documentElement.scrollTop) //IE
{
if(document.documentElement.scrollTop<=0){
clearInterval(four);
}else{
window.scrollBy(0,-30);
}
}else{ //Chrome不支持documentElement.scrollTop
if(document.body.scrollTop<=0){
clearInterval(four);
}else{
window.scrollBy(0,-30);
}
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航