想要反转一个 JavaScript "back to top" 按钮来制作匹配的 "jump to bottom" 按钮

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

离开您已有的代码：

向您的 html 添加另一个按钮并使用 myBtn 作为 class 而不是 id。还给按钮唯一的 ids

<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>

调整你的 CSS。 myBtn 现在是 class

.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;
}

修改您的 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 语句来调整它。

想要反转一个 JavaScript "back to top" 按钮来制作匹配的 "jump to bottom" 按钮

Want to reverse a JavaScript "back to top" button to make a matching "jump to bottom" button

javascript

scroll

button

page-jump