0

我有一个“返回顶部”按钮，它在所有浏览器甚至移动设备上都非常适合我。因为我在基本上是照片库页面上使用它，最新的照片被添加到底部，我想添加一个始终在页面顶部可见的匹配按钮，以便经常访问者可以直接跳到底部。我搜索了 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>

谢谢你。

4

1 回答 1

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 处于活动状态。您可以通过修改函数if中的语句来调整它。scrollFunction

于 2021-01-18T22:23:10.723 回答