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控制框架刷新
Aug 01 Javascript
jQuery live
May 15 Javascript
页面中js执行顺序
Nov 09 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
解决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编程最快明白》第三讲:php数组
2010/11/01 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python实现kmp算法的实例代码
2019/04/03 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
厂长助理岗位职责
2013/12/27 职场文书
商务邀请函范文
2014/01/14 职场文书
促销活动总结
2014/04/28 职场文书
岗位工作说明书
2014/07/29 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015年教师国培感言
2015/08/01 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
python基础之函数的定义和调用
2021/10/24 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript