js返回顶部底部代码

在JavaScript中实现返回页面顶部或底部的功能，通常涉及到操作DOM元素的滚动位置。以下是实现这一功能的基础概念和相关代码示例。

基础概念

滚动位置：页面元素的垂直滚动位置可以通过scrollTop属性获取或设置。
事件监听：可以使用事件监听器来触发返回顶部或底部的动作。
平滑滚动：为了提升用户体验，通常会使用平滑滚动效果。

代码示例

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回顶部示例</title>
<style>
    #backToTopBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #555;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #backToTopBtn:hover {
        background-color: #777;
    }
</style>
</head>
<body>

<button onclick="topFunction()" id="backToTopBtn" title="返回顶部">Top</button>

<script>
    // 当用户滚动时，显示或隐藏按钮
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("backToTopBtn").style.display = "block";
        } else {
            document.getElementById("backToTopBtn").style.display = "none";
        }
    }

    // 平滑滚动到页面顶部
    function topFunction() {
        document.body.scrollTop = 0; // 对于Safari
        document.documentElement.scrollTop = 0; // 对于Chrome, Firefox, IE 和 Opera
    }
</script>

<!-- 页面内容 -->
<div style="height:2000px">
    <!-- 这里放置大量内容以测试滚动效果 -->
</div>
</body>
</html>

返回底部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回底部示例</title>
<style>
    #backToBottomBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #555;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #backToBottomBtn:hover {
        background-color: #777;
    }
</style>
</head>
<body>

<button onclick="bottomFunction()" id="backToBottomBtn" title="返回底部">Bottom</button>

<script>
    // 当用户滚动时，显示或隐藏按钮
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollHeight - (document.body.scrollTop + window.innerHeight) < 20) {
            document.getElementById("backToBottomBtn").style.display = "none";
        } else {
            document.getElementById("backToBottomBtn").style.display = "block";
        }
    }

    // 平滑滚动到页面底部
    function bottomFunction() {
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
    }
</script>

<!-- 页面内容 -->
<div style="height:2000px">
    <!-- 这里放置大量内容以测试滚动效果 -->
</div>
</body>
</html>