Dynamischer Nach-Oben-Knopf mit Scroll-Effekt

Sie möchten den Besuchern Ihrer Seiten einen "Nach Oben"-Knopf anbieten, der erst erscheint, wenn auf der Seiten ein Stück nach unten gescrollt wurde? Dann lesen Sie weiter! Mit einem kleinen Javascript ist das rasch erledigt. Und ein hübscher Scroll-Effekt ist auch gleich noch mit dabei.

Der Code

<style type="text/css">
.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(0, 136, 197, 0.60);
    font-size: 12px;
    padding: 1em;
    display: none;
}
.back-to-top:link {
  color: white !important;
 }
 
.back-to-top:hover {    
  background-color: rgba(0, 136, 197, 1);
  color: white !important;
}
</style>

<script>
jQuery(document).ready(function() {
  var label     = 'Nach oben';
  var offset    = 120;
  var duration  = 500;

  $('body').append('<a href="#-1" class="back-to-top">'
                   + label
                   + '</a>');

  $(window).scroll(function() {
    if ($(this).scrollTop() > offset) {
      $('.back-to-top').fadeIn(duration);
    } else {
      $('.back-to-top').fadeOut(duration);
    }
  });
    
  $('.back-to-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, duration);
    return false;
  })
});
</script> 

Das Skript anpassen

Alle fett und rot markierten Teile des Skripts können Sie bei Bedarf anpassen:

CSS-Element
 Bedeutung
 Vorgabe
back-to-top - color Textfarbe des Knopfs
 000000
back-to-top - background-color Hintergrundfarbe und Sättigung als RGBA- Wert im Format:
r, g, b, Sättigung)
 rgba(0, 136, 197, 0.60);
.back-to-top - link - color Textfarbe des Links white
.back-to-top:hover - color Textfarbe des Links beim Überfahren mit der Maus white
.back-to-top:hover - background-color Hintergrundfarbe und Sättigung als RGBA- Wert im Format:
r, g, b, Sättigung)		 rgba(0, 136, 197, 1);

Skript-Variable
 Bedeutung
 Vorgabe
label     
 Text des Knopfs
 Nach oben
offset  Startwert für Anzeige des Knopfs in Pixel
 120
duration Dauer des Scroll-Effekts beim Klick auf den Knopf in Millisekunden 500

RGBA Farben bestimmen

Mit dem kleinen Online-Tool  Devoth‘s HEX 2 RGBA Color Calculator können Sie einen herkömmlichen hexadezimalen Farbwert (#) in eine RGB bwz. RGBA-Wert umrechnen.