js浏览器滚动条卷去的高度scrolltop(实例讲解)


Posted in Javascript onJuly 07, 2017

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 相关文章推荐
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
详谈js模块化规范
Jul 07 #Javascript
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Pytorch模型转onnx模型实例
2020/01/15 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
使用python实现多维数据降维操作
2020/02/24 Python
应届生法律顾问求职信
2013/11/19 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
团日活动总结报告
2014/06/25 职场文书
班级课外活动总结
2014/07/09 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
优秀党员自我评价范文
2014/09/15 职场文书