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/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Vue入门之数量加减运算操作示例
Dec 11 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 随机排序广告的实现代码
2011/05/09 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python交易记录整合交易类详解
2019/07/03 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
如何提高MySql的安全性
2014/06/19 面试题
管理学院毕业生自荐信范文
2014/03/10 职场文书
幼儿园秋游感想
2014/03/12 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
如何写好活动总结
2019/06/21 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android