Fertiger Code für einen "Scroll to Top"-Button

Post Reply
donsenilo
Sr. Bludit
Posts: 38
Joined: Thu Nov 17, 2016 11:18 pm

Mon Jun 05, 2017 2:16 pm

Hi

ich habe hier einen "Scroll to Top"-Button eingebaut.
Die Teile für den Code habe ich irgendwo in den Weiten des Webs aufgetrieben und etwas angepasst.
Ich habe keine Ahnung, wie man ein PlugIn erstellt (und möchte mich ehrlich gesagt da nicht auch noch einarbeiten), aber evtl. findet sich jemand, der (bei Bedarf) aus dem Ganzen ein PlugIn erstellen kann (getestet habe ich das soweit mal mit FF, IE und Chrome).

In den nachfolgend angegebenen 3 Dateien sind die jeweiligen Codes einzufügen:

sidebar.php: (ganz unten als neue Zeile nach "</section>")

Code: Select all

 <button onclick="topFunction()" id="myBtn" title="Nach oben" alt="Nach oben"></button>
main.css: (hierbei muss natürlich die entsprechende Background-Grafik am korrekten Ort liegen)

Code: Select all

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 10px from the right */
    z-index: 999; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: white; /* Set a background color */
    color: blue; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0px; /* Some padding */
    border-radius: 4px; /* Rounded corners */
	height: 24px;
	width: 24px;
	background: url('/pfeil.png') no-repeat;
}

#myBtn:hover {
    background: url('/pfeil1.png') no-repeat;
}
main.js: (ganz unten nach "})(jQuery);")

Code: Select all

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        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; // For Chrome, Safari and Opera
    document.documentElement.scrollTop = 0; // For IE and Firefox
}
Post Reply