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 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
Angular2自定义分页组件
Apr 19 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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抓即时股票信息
2006/10/09 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php常用的工具开发整理
2019/09/26 PHP
php中yii框架实例用法
2020/12/22 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python中logging库的使用总结
2017/10/18 Python
高效使用Python字典的清单
2018/04/04 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python Matplotlib模块的使用
2020/09/16 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
教师节促销方案
2014/03/22 职场文书
小学新学期寄语
2014/04/02 职场文书
校本课程教学计划
2015/01/19 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
个性与发展自我评价
2015/03/06 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python