jQuery-Erweiterung: „zum Anfang“-Button mit AutoHide

Wenn eine Shopseiten sehr lang wird, dann ist es gerade auf mobilen Endgeräten sehr mühsam wieder zum Beginn der Seite zu gelangen. Mit dieser einfachen jQuery-Erweiterung „ScrollToTop“ wird nach dem Scrollen automatisch ein Button eingeblendet, über den der User wieder zum Seitenanfang kommt.

Dazu sind nur die folgenden Codezeilen auf die einzelnen Ressourcen zu verteilen. Das Script ist sehr einfach und minimal gehalten (ohne Optionen und Paramter) und dient vor allem als Grundlage für eigene Erweiterungen.

 

Scroll-to-Top jQuery

 

jQuery-Teil

// ScrollToTop Autohide
jQuery.fn.autohidebacktotop = function() {
   var elm = $(this) ;
   $(window).scroll(function(){
      if ( $( window ).scrollTop() > 200 ) {
         elm.fadeIn('slow') ;
      } else {
         elm.fadeOut('slow') ;
      }
   }) ;

   elm.bind("click", function() {
      $("html, body").animate({scrollTop:0}) ;
      return false ;
   });
};

$(document).ready(function() {
      $("#autohidebacktotop").autohidebacktotop();
}

CSS-Teil

#autohidebacktotop { display:none ; position:fixed ; bottom:20px ; right:20px }

HTML-Teil

<p id="autohidebacktotop"><a href="#"><img 
src="[OS_PICDIR]/main/icon_top.png" alt="zum Anfang" border="0" /></a></p> 

 

icon_top

 

Die Anwendung ist unabhängig von unserem Shopsystem und kann auf jeder Seite verwendet werden.