滚动scroll【黑马web前端】

更新时间:2019年07月26日 11时15分44秒来源:黑马程序员论坛

一、移动滚动条
scroll(x, y)
将滚动条移动到指定位置。该方法接收两个参数，分别是x和y坐标。

<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
      scroll(0,0); //滚动到指定位置
}
</script>
scrollTo(x, y)
scrollTo方法和scroll方法功能完全相同。

<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
      scrollTo(0,0); //滚动到指定位置
}
</script>
scrollBy(x, y)
使滚动条移动指定距离。该方法接收两个参数，分别是x和y方向上的偏移量。

<div style="height:1000px">
<button id='btn1' style="position:fixed">向下滚动</button>
<button id='btn2' style="position:fixed;top:40px">向上滚动</button>
</div>
<script>
btn1.onclick = function(){
      scrollBy(0,100);  //每次点击向上滚动100px
}
btn2.onclick = function(){
      scrollBy(0,-100); //每次点击向下滚动100px
}
</script>
封装方法实现自动阅读功能。


<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stop" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
start.onclick = function(){
      timer = setInterval(function(){
         window.scrollBy(0, 10);
      },100);
}
stop.onclick = function(){
      clearInterval(timer);
}
</script>
如上代码所示，如果连续点击多次开始按钮，会创建多个定时器，它们的效果会叠加。此时点击停止按钮，只会清除最新的一个定时器，其余不受影响。这是一个bug，修改如下。


<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stopd" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
var key = true; //加锁式编程
start.onclick = function(){
      if(key){
         timer = setInterval(function(){
            window.scrollBy(0, 10);
         },100);
         key = false;
      }
}
stopd.onclick = function(){
      clearInterval(timer);
      key = true;
}
</script>
scrollIntoView()
移动滚动条，让当前元素在视口中可见。该方法接收一个布尔类型的参数，传参为true或不传参时，视口顶部会尽可能与当前元素顶部平齐。传参为false时，视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用，兼容于所有主流浏览器。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      div.scrollIntoView();
}
</script>
二、滚动条的移动距离
标准方法
w3c提供了两个标准方法pageXOffset和pageYOffset，分别用来计算滚动条在x轴和y轴上的移动距离。它们在ie8及以下版本的浏览器中不兼容。ie9是一个过度版本，ie9以上全面支持w3c标准，ie9以下不支持w3c标准，ie9支持了一小部分。

window.pageXOffset

计算滚动条在x轴上的移动距离，返回结果是一个数字，单位像素。只读属性。

window.pageYOffset

计算滚动条在y轴上的移动距离，返回结果是一个数字，单位像素。只读属性。

兼容低版本ie
兼容低版本ie浏览器的方法有两组，分别是第一组document.body.scrollLeft/scrollTop和第二组document.documentElement.scrollLeft/scrollTop。它们都用来获取或设置滚动条在x轴/y轴上的移动距离，返回结果是一个数字，单位像素。可读可写。这里兼容性比较混乱，有的ie版本第一组方法可用，有的第二组方法可用。规律是这两组方法只能也肯定会有一组是可用的，另一组不可用的方法返回值一定是0。所以在使用它们时，只需将两组方法相加即可。

var xOffset = document.body.scrollLeft + document.documentElement.scrollLeft;
var yOffset = document.body.scrollTop + document.documentElement.scrollTop;
//实现回到顶部，兼容于所有浏览器
function scrollTop(){
var distance = document.body.scrollTop + document.documentElement.scrollTop
if(distance != 0){
      document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
封装兼容性方法求滚动条移动距离
function getScrollOffset(){
if(window.pageXOffset){
      return {
         x: window.pageXOffset,
         y: window.pageXOffset
      }
}else{
      return {
         x: document.body.scrollLeft + document.documentElement.scrollLeft,
         y: document.body.scrollTop + document.documentElement.scrollTop
      }
}
}
三、滚动事件
window对象或dom元素都可以设置滚动事件。

<div style="height:1000px">
<div id="div" style="position:fixed;top:10px;"></div>
</div>
<script>
window.onscroll = function(){
      var distance = document.documentElement.scrollTop + document.body.scrollTop;
      div.innerHTML = 'scrollTop:' + distance;
}
</script>
四、操作滚动条回到顶部
五种基本方法
锚点

锚点是一种实现页内跳转的常用方式。利用锚点可以很轻松的实现返回顶部功能。

<style>
a{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="point"></div>
<a href="#point">回到顶部</a>
</div>
scrollTop

scrollTop属性用于获取滚动条在y轴上的移动距离。将该属性设置为0可以实现返回顶部功能。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
function scrollTop(){
      var distance = document.body.scrollTop + document.documentElement.scrollTop
      if(distance != 0){
         document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
}
btn.onclick = scrollTop;
</script>
scrollTo()或scroll()

将滚动条移动到指定位置。该方法接收两个参数，分别是x和y坐标。设置scrollTo(0,0)可以实现返回顶部的效果。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      scrollTo(0,0); //或scroll(0,0);
}
</script>
scrollBy()

使滚动条移动指定距离。该方法接收两个参数，分别是x和y方向上的偏移量。计算滚动条在y轴上的移动距离，将其作为参数，逆向滚动，就可以实现返回顶部的功能。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      var top = 0;
      if(window.pageYOffset){
         top = window.pageYOffset;
      }else{
         top = document.body.scrollTop + document.documentElement.scrollTop;
      }
      scrollBy(0,-top);
}
</script>
scrollIntoView

移动滚动条，让当前元素在视口中可见。该方法接收一个布尔类型的参数，传参为true或不传参时，视口顶部会尽可能与当前元素顶部平齐。传参为false时，视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用，兼容于所有主流浏览器。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      div.scrollIntoView();
}
</script>
效果增强
美化按钮

ie8及以下版本的浏览器中不兼容。

<style>
.box{
      position:fixed;
      right:10px;
      bottom: 10px;
      height:30px;
      width: 50px;
      text-align:center;
      padding-top:20px;
      background-color: lightblue;
      border-radius: 20%;
      overflow: hidden;
}
.box:hover:before{
      top:50%
}
.box:hover .box-in{
      visibility: hidden;
}
.box:before{
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content:'回到顶部';
      width: 40px;
      color:peru;
      font-weight:bold;
}
.box-in{
      visibility: visible;
      display:inline-block;
      height:20px;
      width: 20px;
      border: 3px solid black;
      border-color: white transparent transparent white;
      transform:rotate(45deg);
}
</style>
<div style="height:2000px;">
<div id="box" class="box">
      <div class="box-in"></div>
</div>
</div>
添加动画

使用定时器，让scrollTop的值每次减少50，到0则动画完毕。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
使用定时器，让scrollTo(x,y)中的y参数每次减少50，直到减少到0，则动画完毕。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            scrollTo(0,oTop-50);
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
使用定时器，将scrollBy(x,y)中的y参数设置为-50。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            scrollBy(0,-50);
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
如上代码存在一个缺陷，当页面内容较多时滚动到顶部需要花费很多时间。可以用时间来控制动画效果，假设回到顶部的动画效果共运动500ms。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      //获取当前毫秒数
      var startTime = + new Date();
      //获取当前页面的滚动高度
      var b = document.body.scrollTop + document.documentElement.scrollTop;
      var d = 500;
      var c = b;
      timer = requestAnimationFrame(function func(){
         var t = d - Math.max(0,startTime - (+new Date()) + d);
         document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
         timer = requestAnimationFrame(func);
         if(t == d){
            cancelAnimationFrame(timer);
         }
      });
}
</script>

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

滚动scroll【黑马web前端】

相关阅读