js两种不同置顶效果

最新推荐文章于 2023-11-11 10:25:34 发布

原创最新推荐文章于 2023-11-11 10:25:34 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IT

本文介绍了一种在网页中实现返回顶部功能的方法。通过使用HTML、CSS和JavaScript，可以创建一个回顶部按钮，当用户向下滚动页面超过一定距离时，该按钮会显示出来。点击按钮后，页面将平滑地滚动回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #scroll {
            width: 62px;
            height: 50px;
            right: 50px;
            bottom: 50px;
            display: none;
            cursor: pointer;
            position: fixed;
            background: #000000;
        }
        
        img {
            width: 100%;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
        <img src="tangwei.jpg" />
    </div>
    <div id="scroll"></div>
    <script type="text/javascript">
        // 获取置顶对象
        var obj = document.getElementById('scroll');

        // 置顶对象点击事件
        obj.onclick = function() {
            var timer = setInterval(function() {
                window.scrollBy(0, -1000);
                if (document.body.scrollTop == 0) {
                    clearInterval(timer);
                };
            }, 10);
            // window.scrollTo(0, 0)   //直接回到顶部

        }

        // 窗口滚动检测控制置顶对象的隐藏与显示
        window.onscroll = function() {
            //游览器兼容问题
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // obj.style.display = (scrollTop >= 300) ? "block" : "none";

            //游览器可视区域
            var scrollH = window.innerHeight || window.document.clientHeight;

            obj.style.display = scrollTop > scrollH ? "block" : "none";
        }
    </script>
</body>

</html>