js浏览器滚动条卷去的高度scrolltop(实例讲解)
更新时间：2017年07月07日 08:53:17 投稿：jingxian
下面小编就为大家带来一篇js浏览器滚动条卷去的高度scrolltop(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1、之前我们学习的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值，不能通过属性修改元素的样式
2、scrollTop/scrollLeft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”的属性）
box.scrollTop = 0 // 直接回到容器的顶部
我们的scrollTop的值是存在边界值（最大和最小值），我们设置的值比最小值小或者比最大值大都没用，起到效果的依然是边界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的顶部，没有超出
console.log(box.scrollTop) //0
[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最经典的应用就是回到顶部，下面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:1000%;
background:#11c900;
}
a{
text-decoration: none;
color:#000;
}
</style>
</head>
<body>
<a href="javascript:" rel="external nofollow" id="goLink">GO</a>
//A标签本身是跳转页面的，把跳转的地址写在href这个属性中
/*
1）、不写值的话是刷新本页面
2）、写的如果是#target，是锚点定位，定位到当前页面Id为target这个位置
3）、“javascript:”这样写是取消A标签默认跳转的行为
*/
<script>
var goLink =document.getElementById("goLink");
/*
回到顶部：
总时间（duration）:500ms
频率（interval）：多长时间走一步 10ms
总距离(target): 当前的位置（当前的scrollTop）- 目标的位置(0)
步长(step)：每一次走得距离 (target/duration)*interval
*/
/*
这个代码是可以优化的:
开始GO按钮是不显示的，当滚动到一定的距离之后，才显示，反之隐藏 只要浏览器的滚动条在滚动，我们就需要判断GO显示还是隐藏
浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pageDown/pageUp键、点击滚动条的空白区域或者箭头（自主操作的行为）...我们还可以通过js控制scrollTop的值来实现滚动条的滚动
*/
window.onscroll = function computedDisplay(){//不管怎么操作的，只要滚动条动了就会触发这个行为
var curTop = document.documentElement.scrollTop || document.body.scrollTop;
var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(curTop>=clientHeight){
goLink.style.display = "block"
}else{
goLink.style.display = "none"
}
}
goLink.onclick = function(){
this.style.display = "none";//并不会消失，因为我们滚动条往回走的时候 又会触发onscroll事件，又会进行显示
window.onscroll = null;
var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop;
var step = (target/duration)*interval;
var timer = window.setInterval(function(){
var curTop = document.documentElement.scrollTop || document.body.scrollTop;
if(curTop===0){
window.clearInterval(timer);
window.onscroll = computedDisplay;
//当动画结束后把对应的方法重新绑定给window.onscroll
return;
}
curTop-=step
document.documentElement.scrollTop = curTop;
document.body.scrollTop = curTop;
},interval)
// document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
}
</script>
</body>
</html>
以上这篇js浏览器滚动条卷去的高度scrolltop(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript基础——使用Canvas绘图，Canvas也真的跟现实生活中的画布非常相似，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-11-11
JavaScript中arguments.callee属性的作用与替换方案
这篇文章介绍了JavaScript中arguments.callee属性的作用与替换方案，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了JS实现纸牌发牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
下面小编就为大家带来一篇json对象转为字符串,当做参数传递时加密解密的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
这篇文章主要介绍了微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
原生js实现addClass,removeClass,hasClass方法
这篇文章主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下2016-04-04
这篇文章主要给大家介绍了关于JavaScript浅层克隆与深度克隆的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了layui导航栏二级菜单不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
比JSON.stringify快两倍的fast-json-stringify性能对比分析
这篇文章主要为大家介绍了比JSON.stringify快两倍的fast-json-stringify性能对比分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制2013-11-11
最新评论