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.
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>Die Anwendung ist unabhängig von unserem Shopsystem und kann auf jeder Seite verwendet werden.