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

Question

I have a "back to top" button that has been working perfectly for me in all browsers and even on mobile. Because I am using it on what are basically photo gallery pages, where the newest photos are added to the bottom, I want to add a matching button that is always visible at top of page so frequent visitors can jump right to the bottom. I searched Stack and found a number of similar questions but because I know nothing really about JavaScript, I don't know how to convert the solutions offers to my specific existing code.

Here's my codes:

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

Thankyou.

Answer 1

Going off of the code you already have:

1. Add another button to your html and use myBtn as a class rather than id. Also give the buttons unique 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>

2. Adjust your CSS. myBtn is now a 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;
}

3. Modify your JavaScript code. Add a bottomFunction and decide when to show the 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;
}

For siplicity the bottonButton is active when the topButton is not. You can adjust this by modifying the if statement in the scrollFunction function.