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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
js 处理URL实用技巧
Nov 23 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
javascript中的隐式调用
Feb 10 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
小程序图片长按识别功能的实现方法
Aug 30 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
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP中cookie知识点学习
2018/05/06 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python读取xlsx的方法
2018/12/25 Python
selenium+python环境配置教程详解
2019/05/28 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python zip()函数使用方法解析
2019/10/31 Python
python 代码运行时间获取方式详解
2020/09/18 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
函授自我鉴定
2013/11/06 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
幼儿园秋游感想
2014/03/12 职场文书
企业党员一句话承诺
2014/05/30 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书