5202

ein Blog über technische Fragen zu Blogger

'Smooth' scroll back to Top

von
Interne Links, mit denen ihr vom Ende einer Seite zurück nach oben 'springen' könnt, benützen ja inzwischen viele Blogger. Ich zeige euch heute, wie ihr statt mit einem harten 'Sprung', sanft nach oben scrollen könnt. Außerdem ist der Link ja relativ sinnlos, wenn eure Besucher noch ganz oben auf der Seite sind - also blenden wir den Link erst ab einer gewissen Abstand auf die Oberkante beziehungsweise Unterkante ein.

HTML Fallback

Für das Problem 'smooth' scroll back to Top habe ich für Blogger noch nie eine überzeugende Lösung gefunden - hier also meine Homebrew Arbeit.

Das erste Problem ist ein Fallback für diejenigen Besucher zu definieren, die Javascript in ihren Browser deaktiviert haben.

Im Grunde ist das trivial - wir nehmen als HTML einen <div> Container, in dem ein A-Element liegt und in dem wiederum ein <span> Container eingebettet ist, der später den Pfeil-nach-oben als Hintergrund tragen wird:
<div id="back-top" style="display: block; ">
  <a href="#top">
     <span></span>
   </a>
</div>
Die HTML kommt in ein HTML/Java Gadget und wird irgendwo unten im Blog platziert und das wäre an HTML schon alles - den Rest machen wir mit CSS und jQuery.

CSS

Als erstes positionieren wir den <div> Container unten an der Seite mit position: fixed. Die CSS_Eigenschaften bottom und right richten den Container genau aus. Der z-index ist nötig, wenn der Pfeil von irgendwelchen Layern im Blog überdeckt ist - ansonsten wäre der Pfeil unklickbar. Gebt nie einen höheren Wert als "10", weil der Pfeil sonst die Blogger-Lightbox überdeckt!
#back-top {
position: fixed;
bottom: 60px;
right:180px;
z-index: 10
}
Im zweiten Schritt geben wir dem <span> Container einen Hintergrund - d.i. der Pfeil.
#back-top span {
width: 55px;
height: 55px;
display: block;
background: url('http://goo.gl/OYPgh') no-repeat;
}
Fertig - der Back to Top Link funktioniert bereits, aber nicht 'smooth'. Mit abgeschaltetem Javascript werden eure Besucher den Pfeil so wie er jetzt ist, aber benützen können.

jQuery

Das 'smooth' scrollen wird mit jQuery gemacht. Damit das funktioniert, müsst ihr das jQuery Framework zuerst in eurem Blog einbauen. Das Script kommt dann irgendwo _unterhalb_ von dem Framework.
Zeigen und Verbergen
Das Script für die Demo1 besteht aus mehreren Teilen - als erstes wird der <div> Container #back-top ganz ausgeblendet.
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
      // hide #back-top 
     $("#back-top").hide();
     //
 });
//]]>
</script>
Dann wird eine Funktion definiert, die ab einer Höhe von 200px den Container dynamisch einblendet, darüber wieder ausblendet.
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
      // hide #back-top 
     $("#back-top").hide();
     // fade in #back-top
     $(function () { 
         $(window).scroll(function () {
             if ($(this).scrollTop() > 200) {
                 $('#back-top').fadeIn();
             } else {
                 $('#back-top').fadeOut();
             }
         });

 });
//]]>
</script>
Im letzten Schritt wird per Klick auf den Anker eine Funktion geschrieben, die den Blog wieder sanft nach oben scrollt:
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
 
     // hide #back-top 
     $("#back-top").hide();
    
     // fade in #back-top
     $(function () { 
         $(window).scroll(function () {
             if ($(this).scrollTop() > 200) {
                 $('#back-top').fadeIn();
             } else {
                 $('#back-top').fadeOut();
             }
         });
 
         // scroll body to 0px 
         $('#back-top a').click(function () {
             $('body,html').animate({
                 scrollTop: 0
             }, 800);
             return false;
         });
     });
 });
//]]>
</script>
Fertig - Mission accomplished! Ab einer Höhe von 200px - von der Oberkante der Seite gerechnet -, wird der Link eingeblendet und per Klick sanft nach oben gescrollt. Das sollte in allen Browsern funktionieren.

Fall2: Ausblenden bezogen auf die Unterkante der Seite

Nicht immer ist es der Weisheit letzte Schluss, den Pfeil erst ab einer gewissen Höhe von der Oberkante einzublenden. Ist es manchmal vielleicht sinnvoller - wie in Demo2 - den Pfeil erst 20px vor der Unterkante einzublenden? Da Posts ja nicht alle die gleiche Höhe haben, nützt im dem Fall den Trigger, auf eine von der Oberkante berechnete Höhe zu legen, nichts.

Für diesen Fall definiere ich zunächst eine zusätzliche Funktion:
    // scrollBottom Funktion 
   $.fn.scrollBottom = function() { 
   return $(document).height() - this.scrollTop() - this.height(); 
};
Die Funktion für das dynamische einblenden bei einer Höhe kleiner als 20px über der Grundlinie sähe nun so aus:
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
 
     // hide #back-top 
     $("#back-top").hide();
    
    // scrollBottom Funktion 
 $.fn.scrollBottom = function() { 
   return $(document).height() - this.scrollTop() - this.height(); 
 };
     $(function () { 
         $(window).scroll(function () {
             if ($(this).scrollBottom() < 20) {
                 $('#back-top').fadeIn();
             } else {
                 $('#back-top').fadeOut();
             }
         });
 //
    });
//]]>
</script>
Der Rest bleibt gleich - das ganze Script am Stück:
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
 
     // hide #back-top 
     $("#back-top").hide();
    
    // scrollBottom Funktion 
 $.fn.scrollBottom = function() { 
   return $(document).height() - this.scrollTop() - this.height(); 
 };
     $(function () { 
         $(window).scroll(function () {
             if ($(this).scrollBottom() < 10) {
                 $('#back-top').fadeIn();
             } else {
                 $('#back-top').fadeOut();
             }
         });
 
         // scroll body to 0px on click
         $('#back-top a').click(function () {
             $('body,html').animate({
                 scrollTop: 0
             }, 800);
             return false;
         });
     });
    });
//]]>
</script>

Fragen, Anmerkungen?

Schaut komplizierter aus als es ist, probiert das trotzdem bitte zuerst in einem Test-Blog aus. Wenn's Fragen oder Anmerkungen zu dem Post gibt, fragt ruhig hier nach. Falls es irgendetwas gibt, was ihr loswerden wollte, aber thematisch partout hier nicht rein passt - dafür habe ich jetzt ein Forum.