置顶导航（缓速置顶）

最新推荐文章于 2022-01-14 16:59:23 发布

LBY_XK

最新推荐文章于 2022-01-14 16:59:23 发布

阅读量158

点赞数

文章标签： html javascript css css3 html5

本文链接：https://blog.csdn.net/LBY_XK/article/details/117527981

版权

动画函数

function animate(obj, target, callback) { //obj动画执行者 target移动位置calback用于回调的函数
    // 防止重复进行动画命令，完成一次动画再绑定新动画
    // 先清除以前的定时器，再进行心得定时器
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        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();
            }
        }
        // 步长公式用于缓动画step = (target - window.pageYOffset)/10
        // 匀速动画就是当前位置加上固定步长
        // obj.style.left = window.pageYOffset + step + 'px'
        window.scroll(0, window.pageYOffset + step);
    }, 15);
}

HTML页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/js/updownanim.js"></script>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="tab">点击回到顶部</div>
    <style>
        div {
            width: 700px;
            height: 400px;
            background-color: #ccc;
            margin: 0 auto;
        }
        
        div:nth-child(odd) {
            background-color: greenyellow;
        }
        
        .tab {
            width: 50px;
            height: 300px;
            background-color: pink;
            position: fixed;
            bottom: 100px;
            right: 0;
        }
    </style>
    <script>
        var tab = document.querySelector('.tab')
        tab.addEventListener('click', function() {
            animate(window, 0)
        })
    </script>
</body>

</html>

在这里插入图片描述

LBY_XK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
置顶导航（缓速置顶）

动画函数function animate(obj, target, callback) { //obj动画执行者 target移动位置calback用于回调的函数 // 防止重复进行动画命令，完成一次动画再绑定新动画 // 先清除以前的定时器，再进行心得定时器 clearInterval(obj.timer) obj.timer = setInterval(function() { var step = (target - window.pageYOffse
复制链接

扫一扫