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事件问题
Sep 05 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
解决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通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python文件和流(实例讲解)
2017/09/12 Python
有趣的python小程序分享
2017/12/05 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python else语句在循环中的运用详解
2020/07/06 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
JSF界面控制层技术
2013/06/17 面试题
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
家长会开场白和结束语
2015/05/29 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
2015年教师节主持词
2015/07/03 职场文书
回门宴新娘答谢词
2015/09/29 职场文书