js滚动到顶部底部代码

最新推荐文章于 2024-04-24 14:53:28 发布

正在输入代码中

最新推荐文章于 2024-04-24 14:53:28 发布

阅读量5.3k

点赞数 1

分类专栏： web前端文章标签：源码 javascript

本文链接：https://blog.csdn.net/qq_26744901/article/details/51775634

版权

web前端专栏收录该内容

145 篇文章 0 订阅

订阅专栏

<!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 : 16;
            me.fx = me.fx ? me.fx : 6;
            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  οnclick="goToWhere(0)"
     style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
<div  οnclick="goToWhere(1)"
     style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>

正在输入代码中

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js滚动到顶部底部代码

SCROLL var goToWhere = function (where) { var me = this; me.site = []; me.sleep = me.sleep ? me.sleep : 16; me.fx = me.fx
复制链接

扫一扫

专栏目录