基于JavaScript的网页返回顶部按钮实现

玄之 · 发表于 2025-3-7 17:43:38

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rocket Button</title>
    <style>
        #rocket {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 50px;
            height: 50px;
            border: none;
            cursor: pointer;
            display: none;
        }

        /* 使用 SVG 图标 */
        #rocket .icon {
            width: 50px;
            height: 50px;
            transition: transform 0.3s ease;
        }

        @keyframes rocketLaunch {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) scale(0.5);
                opacity: 0;
            }
        }

        /* 添加悬停效果 */
        #rocket:hover .icon {
            transform: scale(1.1);
        }

        body {
            margin: 0;
            padding: 0;
            height: 200vh; 
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <a class="back-to-top" id="rocket" aria-label="返回顶部">
        <!-- 使用 SVG 图标 -->
<img class="icon" src="https://www.deepsook.cn/s/top.svg" alt="返回顶部">
    </a>

    <script>
        const rocket = document.getElementById('rocket');

        function debounce(func, wait) {
            let timeout;
            return function (...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        }

        window.addEventListener('scroll', debounce(() => {
            if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                rocket.style.display = 'block';
            } else {
                rocket.style.display = 'none';
            }
        }, 100));

        rocket.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });

            rocket.style.animation = 'rocketLaunch 1s cubic-bezier(0.215, 0.610, 0.355, 1) forwards';
            
            setTimeout(() => {
                rocket.style.animation = '';
            }, 1000);

            rocket.style.transform = 'scale(0.9)';
            setTimeout(() => {
                rocket.style.transform = 'scale(1)';
            }, 200);
        });
    </script>
</body>
</html>

玄之 · 发表于 2025-3-8 13:37:30

有些梦想虽然遥不可及，但不是不可能实现。只要我足够的强。

[网站源码] 基于JavaScript的网页返回顶部按钮实现

免责声明

电梯直达
评论1

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com

[网站源码] 基于JavaScript的网页返回顶部按钮实现

免责声明

电梯直达 评论1

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com

电梯直达
评论1