JS: Button zum Seitenanfang(TOP)

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Mittwoch, 17. Juni 2020 um 16:49 Uhr (25/2020 Kalenderwoche)

geändert: Freitag, 22. März 2024 um 10:04 Uhr (12/2024 Kalenderwoche)

Keywords: onTop beginn nachoben seitenanfang toHeader

Kategorien: HTML, JavaScript,

Text:

Der JavaScript-Button "nach oben / on top" (Seitenanfang) taucht erst auf, wenn eine gewisse Tiefe überschritten wurde.
Außerdem wird er nur angezeigt, wenn JS eingeschaltet ist!


Wenn JS ausgeschaltet ist, taucht ein alternativer Link auf.


Anleitung

Quellcode:   

<style>
/* ******************************************************************************
 * START: "OnTop"-Button-/Link **************************************************
 ****************************************************************************** */
a[href="#header"] {
    color: #ffffff; /* Text color */
    font-weight: bold;
    background-color: #007342; /* Set a background color */
    padding: 6px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 12px; /* Increase font size */
}
a[href="#header"]:hover {
    color: #007342; /* Set a background color */
    background-color: #ededed; /* Text color */border: none;
}
/* ******************************************************************************
 * START: "OnTop"-Button erscheint, wenn eine bestimmte Seiten-Tiefe erreicht ist!
 ****************************************************************************** */
#buttonNachOben {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 33px; /* Place the button at the bottom of the page */
    left: 33px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: #ffffff; /* Text color */
    background-color: #007342; /* Set a background color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 6px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 12px; /* Increase font size */
}
#buttonNachOben:hover {
    color: #007342; /* Text color */
    background-color: #CEE7CE; /* Add a dark-grey background on hover */
}
/* ******************************************************************************
 * ENDE: "OnTop"-Button erscheint, wenn eine bestimmte Seiten-Tiefe erreicht ist!
 ****************************************************************************** */
</style>

<p id="linkNachObenOhneJs"><a href="#header">Nach oben</a></p>
<script>
    document.write('<button onclick="topFunction()" id="buttonNachOben" ' +
                   'title="Per Klick nach oben zum Seitenanfang">' +
                   '&#128070;&#xFE0F; Nach oben &#129033;&#xFE0F;</button>');
    //Anschließend den Link ohne JavaScript ausblenden:
    document.getElementById("linkNachObenOhneJs").style.display = "none";
</script>

<button onclick="topFunction()" 
        id="buttonNachOben" 
        title="Per Klick nach oben zum Seitenanfang"
    >&#128070;&#xFE0F; Nach oben &#129033;&#xFE0F;</button>

<script>
/* "OnTop"-Button erscheint, wenn eine bestimmte Seiten-Tiefe erreicht ist! */
let onTopButton = document.getElementById("buttonNachOben");
var zeigeButtonWennPx = 444;//px

// 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 > zeigeButtonWennPx
        || document.documentElement.scrollTop > zeigeButtonWennPx) {
        onTopButton.style.display = "block";
    } else {
        onTopButton.style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>