想要反转 JavaScript“回到顶部”按钮以制作匹配的“跳到底部”按钮

Question

我有一个“返回顶部”按钮，它在所有浏览器甚至移动设备上都非常适合我。因为我在基本上是照片库页面上使用它，最新的照片被添加到底部，所以我想添加一个始终在页面顶部可见的匹配按钮，以便经常访问者可以直接跳到底部。 我搜索了 Stack 并发现了许多类似的问题，但由于我对 JavaScript 一无所知，所以我不知道如何将解决方案提供给我的特定现有代码。

这是我的代码：

// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

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

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

#myBtn {
    display: none; /* hidden by default */
    position: fixed; /* sticky position */
    bottom: 20px; /* distance from bottom */
    right: 30px; /* distance from right */
    z-index: 99; 
    border: 4px solid #0099ff; 
    border-radius: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    outline: none;
    background-color: #6b6b6b; /* GRAY */
    color: #ffffff; /* WHITE text */
    font-size: 13px;
    font-weight: bold;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px;
}

<button onclick="topFunction()" id="myBtn" title="Go to top of page">Top of Page</button>

谢谢。

Answer 1

离开你已有的代码：

1. 在您的 html 中添加另一个按钮并将 myBtn 用作类而不是 id。同时为按钮提供唯一的 ID

<button onclick="topFunction()" class="myBtn" id="topButton" title="Go to top of page">Top of Page</button>
<button onclick="bottomFunction()" class="myBtn" id="bottomButton" title="Go to bottom of page">Bottom of Page</button>

1. 调整您的 CSS。 myBtn 现在是一个类

.myBtn {
    display: none; /* hidden by default */
    position: fixed; /* sticky position */
    bottom: 20px; /* distance from bottom */
    right: 30px; /* distance from right */
    z-index: 99; 
    border: 4px solid #0099ff; 
    border-radius: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    outline: none;
    background-color: #6b6b6b; /* GRAY */
    color: #ffffff; /* WHITE text */
    font-size: 13px;
    font-weight: bold;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px;
}

1. 修改您的 JavaScript 代码。添加一个 bottomFunction 并决定何时显示 Button。

// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

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

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

// When the user clicks on the button, scroll to the bottom of the document
function bottomFunction() {
    document.body.scrollTop = document.body.scrollHeight;
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}

为了简单起见，当 topButton 不活跃时，bottonButton 处于活动状态。您可以通过修改scrollFunction 函数中的if 语句来调整它。