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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
javascript 闭包详解
Feb 15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
js中开关变量使用实例
Feb 24 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
如何让微信小程序页面之间的通信不再变困难
Jun 03 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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python中set常用操作汇总
2016/06/30 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python构建基础的爬虫教学
2018/12/23 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python实现FTP文件传输的实例
2019/07/07 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
双十佳事迹材料
2014/01/29 职场文书
入党推优材料
2014/06/02 职场文书
工程承包协议书
2014/10/20 职场文书
学校运动会加油词
2015/07/18 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书