Sanftes Scrollen sieht einfach schöner aus.
In diesem Codeschnipsel wird eine jQuery-Funktion verwendet, die das “sanfte” Scrollen nach oben realisiert.
Viele Seiten haben inzwischen einen “Scroll wieder nach oben”-Button der, meistens unten rechts eingeblendet wird, wenn man ein wenig herunter scrollt. Diese Buttons haben meist eine feste Position und die Seite scrollt sanft nach oben und springt nicht einfach hoch. Der jQuery-Code ist sehr leicht. Im HTML-Code muss nur ein a id="#ID"-Tag mit der entsprechenden ID angegeben sein. Mit CSS lässt sich dieser Button stylen.
Natürlich verwende ich ebenso einen Button zum sanften Scrollen :-)
Script sanftes Scrollen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <script> $(document).ready(function() { jQuery(function($) { // größerer Wert = Der Scrollbutton erscheint später auf der Seite var upperLimit = 750; var scrollElem = $('#scroll-to-top'); // Scrollgeschwindigkeit var scrollSpeed = 1000; scrollElem.hide(); //Scrollbutton verstecken $(window).scroll(function(){ if($(window).scrollTop() > upperLimit){ $(scrollElem).fadeIn(400); } else{ $(scrollElem).fadeOut(400); } }); $('#scroll-to-top').click(function(event) { $('html, body').animate({ scrollTop:0 }, scrollSpeed); event.preventDefault(); }); }); }); </script> //HTML: <html> <a class="scroll-to-top" id="scroll-to-top" title="Scroll to Top" href="#"></a> </html> //CSS: <style> #scroll-to-top { position: fixed; z-index: 1000; bottom: 20px; right: 20px; display: none; } #scroll-to-top a { display: block; width: 40px; height: 40px; background: rgba(0,0,0,0.5) url(../images/backtotop.png) no-repeat center center; text-indent: -9999px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition:0.4s all ease; -moz-transition:0.4s all ease; -o-transition:0.4s all ease; transition:0.4s all ease; opacity: 0.65 !important; } #scroll-to-top:hover a { background-color: #289dcc; opacity: 1.0 !important; } body.rtl #scroll-to-top a { left: 30px; } /* Responsive Design Support */ @media only screen and (max-width: 480px) { a#scroll-to-top { right: 0; bottom: 0; } body.rtl #scroll-to-top a { left: 0; bottom: 0; } } </style> |
Bewerte den Artikel, wenn du magst:
[Gesamt: 30 Durchschnitt: 4.8/5]
Bastel mal ein
$(document).ready(function() {...});drum, falls jemand versucht das in den Header einzubauen und sich wundert, warum der Button initial erst auf der Seite erscheint und dann beim Scrollen verschwindet.
Zudem würde ich vom return value false bei click Events für Links abraten. Du möchtest wahrscheinlich das Default Verhalten vom Link unterdrücken?
Dafür gibt es folgendes:
$('a').click(function(event) {// Deine Funktion
event.preventDefault();
});
Das schaltet das Default Verhalten von Links aus. Mehr dazu findest du hier Stop (Mis)Using Return False
Hab mich die Tage selbst damit beschäftigt – das Script leih ich mir trotzdem mal kurz aus, ja? ;)
Stimmt, das
$(document).ready(function()...fehlt. Setze es gleich hier mal rein. Bei mir ist es nicht, da ich ohnehin im Footer lade.Grins, ja da war ich ehrlich gesagt faul und habe mich nicht damit beschäftigt :D
Danke dafür! Werde es mal umbauen und danach hier korrigieren.
Nur zu, dafür ist es ja hier ;)
Aufgrund der Hinweise von Domberg, habe ich den Code entsprechend angepasst.