A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2019-5-9 09:59  /  1022 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一、移动滚动条
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>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马