【四种JavaScript 实现页面底部回到顶部功能的实现方式】-CSDN博客

本文链接：https://blog.csdn.net/weixin_41798072/article/details/148242232

JavaScript 实现页面底部回到顶部功能

以下是几种实现页面底部回到顶部功能的方法：

方法一：基础实现（点击按钮滚动到顶部）

<!DOCTYPE html>
<html>
<head>
    <style>
        #backToTop {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            width: 50px;
            height: 50px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <div style="height: 2000px;">滚动测试内容...</div>
    
    <!-- 回到顶部按钮 -->
    <div id="backToTop">↑</div>
 
    <script>
        const backToTopBtn = document.getElementById('backToTop');
        
        // 监听滚动事件
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) { // 滚动超过300px显示按钮
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        });
        
        // 点击回到顶部
        backToTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
        });
    </script>
</body>
</html>

方法二：更流畅的动画效果

// 使用requestAnimationFrame实现更流畅的滚动
function scrollToTop(scrollDuration) {
    const scrollStep = -window.scrollY / (scrollDuration / 15);
    const scrollInterval = setInterval(function() {
        if (window.scrollY !== 0) {
            window.scrollBy(0, scrollStep);
        } else {
            clearInterval(scrollInterval);
        }
    }, 15);
}
 
// 使用示例
document.getElementById('backToTop').addEventListener('click', function() {
    scrollToTop(500); // 500ms内滚动到顶部
});

方法三：同时支持底部和顶部

// 同时支持滚动到底部和回到顶部
function toggleScrollButtons() {
    const backToTopBtn = document.getElementById('backToTop');
    const scrollToBottomBtn = document.getElementById('scrollToBottom');
    
    if (window.pageYOffset > 300) {
        backToTopBtn.style.display = 'block';
        scrollToBottomBtn.style.display = 'none';
    } else if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {
        backToTopBtn.style.display = 'none';
        scrollToBottomBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
        scrollToBottomBtn.style.display = 'none';
    }
}
 
window.addEventListener('scroll', toggleScrollButtons);
 
// 滚动到底部按钮
document.getElementById('scrollToBottom').addEventListener('click', function() {
    window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth'
    });
});

方法四：使用CSS自定义属性控制

:root {
    --back-to-top-size: 50px;
    --back-to-top-color: #333;
    --back-to-top-hover-color: #555;
}
 
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: var(--back-to-top-size);
    height: var(--back-to-top-size);
    background-color: var(--back-to-top-color);
    color: white;
    text-align: center;
    line-height: var(--back-to-top-size);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
#backToTop:hover {
    background-color: var(--back-to-top-hover-color);
}