最新推荐文章于 2022-10-24 12:10:39 发布

a63438840

最新推荐文章于 2022-10-24 12:10:39 发布

阅读量391

点赞数

原文链接：http://www.cnblogs.com/shanlu0000/p/11516077.html

版权

返回顶部：

①滚动窗口至文档中的特定位置

②window.scroll(x,y)

③注意，里面的x 和 y 不跟单位，直接写数字

案例分析：

带有动画的返回顶部

①此时可以继续使用我们封装的动画函数

②只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了

③页面滚动了多少，可以通过 window.pageYoffset 得到

④最后是页面滚动，使用 window.scroll (x, y)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .slide-bar{
        width:45px;
        height:130px;
        margin-left:600px;
        position:absolute;
        left:50%;
        top:300px;
        background-color: pink;
    }
    .header{
        width:1200px;
        height:150px;
        background-color: purple;
        margin:10px auto;
    }
    .banner{
        width:1200px;
        height:250px;
        background-color: skyblue;
        margin:10px auto;
    }
    .main{
        width:1200px;
        height:1000px;
        background-color: yellowgreen;
        margin:10px auto;
    }
    span{
        position:absolute;
        bottom:0;
        display:none;
    }
</style>
</head>
<body>
    <div class="slide-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header">头部区域</div>
    <div class="banner">banner区域</div>
    <div class="main">主体区域</div>
</body>
</html>
<script>
    var slideBar=document.querySelector(".slide-bar");
    var banner=document.querySelector(".banner");
    var bannerTop=banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
    var slideBarTop=slideBar.offsetTop-bannerTop;  //固定定位之后，应该变化的数值
    var main=document.querySelector(".main");
    var goBack=document.querySelector(".goBack");
    var mainTop=main.offsetTop;

    //1,页面滚动事件 scroll
    document.addEventListener("scroll",function () {
        if (window.pageYOffset >= bannerTop)
        {
            slideBar.style.position="fixed";
            slideBar.style.top=slideBarTop+"px";
        }
        else{
            slideBar.style.position="absolute";
            slideBar.style.top=300+"px";
        }

        //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
        if (window.pageYOffset >=mainTop)
        {
            goBack.style.display="block";
        }
        else{
            goBack.style.display="none";
        }

        //3，当我们点击了返回顶部模块，就让窗口滚动到页面的最上方
         goBack.addEventListener("click",function () {
           animate(window,0);
        })

        function animate(obj, target, callback) {
     // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    // if (callback) {
                    //     // 调用函数
                    //     callback();
                    // }
                    callback && callback();
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                // obj.style.left = obj.offsetLeft + step + 'px';
                window.scroll(0,window.pageYOffset + step);

            }, 15);
        }

    })

</script>

转载于:https://www.cnblogs.com/shanlu0000/p/11516077.html

a63438840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝返回顶部（带有动画的返回顶部）

返回顶部：①滚动窗口至文档中的特定位置②window.scroll(x,y)③注意，里面的x 和 y 不跟单位，直接写数字案例分析：带有动画的返回顶部①此时可以继续使用我们封装的动画函数②只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了③页面滚动了多少，可以通过 window.pageYoffset 得到④最后是页面滚动，使用 ...
复制链接

扫一扫