想要反转一个JavaScript“；“返回顶部”；按钮以生成匹配的“；跳到底部”；按钮

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

这是我的密码：

//当用户从文档顶部向下滚动200px时，显示按钮
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>200 | | document.documentElement.scrollTop>200）{
document.getElementById（“myBtn”）.style.display=“block”；
}否则{
document.getElementById（“myBtn”）.style.display=“无”；
}
}
//当用户单击按钮时，滚动至文档顶部
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

#myBtn{
显示：无；/*默认情况下隐藏*/
位置：固定；/*粘性位置*/
底部：20px；/*与底部的距离*/
右侧：30px；/*与右侧的距离*/
z指数：99；
边框：4px实心#0099ff；
边界半径：20px；
盒影：0.8px 16px 0 rgba（0,0,0,0.2），0.6px 20px 0 rgba（0,0,0.19）；
大纲：无；
背景色：#6b；/*灰色*/
颜色：#ffffff；/*白色文本*/
字体大小：13px；
字体大小：粗体；
光标：指针；/*在悬停时添加鼠标指针*/
填充：10px；
}

---

页面顶部

跳出您已有的代码：

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

修改JavaScript代码。添加一个函数并决定何时显示按钮

---

对于siplicity，当topButton未激活时，bottonButton处于激活状态。您可以通过修改

滚动函数

函数中的

if

语句来进行调整。

非常感谢！这非常有效。我所要做的就是为CSS中的按钮添加单独的ID，这样我就可以对它们进行不同的定位。这是我下一步要解决的问题——如何将它们相对于我的内容包装器div而不是页面的侧面进行定位。非常感谢。

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

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

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