js 页面缓慢移动到顶部，移动到底部实现

最新推荐文章于 2023-02-04 13:14:51 发布

兮夏-

最新推荐文章于 2023-02-04 13:14:51 发布

阅读量610

点赞数 1

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_46693606/article/details/127067787

版权

js 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
    var goToWhere = function (where)
    {
        var me = this;
        me.site = [];
        me.sleep = me.sleep ? me.sleep : 26;
        me.fx = me.fx ? me.fx : 26;
        clearInterval (me.interval);
        var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
        var height = !!where ? dh : 0;
        me.interval = setInterval (function ()
        {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            var speed = (height - top) / me.fx;
            if (speed === me.site[0])
            {
                window.scrollTo (0, height);
                clearInterval (me.interval);
            }
            window.scrollBy (0, speed);
            me.site.unshift (speed);
        }, me.sleep);
    };
</script>
</head>
<body>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
    <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
    <div id="back-up" onclick="goToWhere(0)"
        style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
    <div id="back-up" onclick="goToWhere(1)"
        style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>

在这里插入图片描述
goToWhere(0) -----------------------> 返回顶部
goToWhere(1) -----------------------> 返回底部