unForastero

<Webworking>


Nach oben Scrollen - wenn es notwendig wird

Mittwoch, 14 Mai 2014     4 Kommentare  








Insbesondere wenn eine Seite viel Inhalte aufweist, kann man dem Besucher etwas Gutes tun, und einen einfachen Weg anbieten, wieder schnell nach oben an den Seitenanfang zu scrollen. Also erstellen wir mit jQuery mal einen schönen smoothigen Seiten-Scroll Effekt.

Fangen wir mit einem Button an, mit fixer Position auf der rechten unteren Seite. Einmal geklickt wird mit einer netten Animation nach oben gescrollt ohne Page-Refresh oder direktem Sprung. Ausserdem machen wir den Button erst sichtbar, wenn es überhaupt notwendig ist, wenn die Seite genug nach unten gescrollt wurde.

Dass CSS zum Button.


.scrollicon{
text-align: center;
text-decoration:none;

width:50px;
height:50px;
border-radius:50%;

background:#ccc;
opacity:0.5;

position:fixed;
bottom:60px;
right:120px;
display:none;
border:1px solid #333;

}
.scrollicon div{
font-weight:bold;
font-size:28px;
color:#333;
padding-top:12px;
}

Der Button selbst ist also an fixer Position, unsichtbar. MIt der CSS3 Eigenschaft border-radius ist der Button rund, die Opacity ist auf 0,5 eingestellt. Innerhalb des Elementes ist ein Div-Container mit einem einzelnen Textzeichen. So wird ein Icon nachempfunden, ohne das ein Bild verwendet werden muss. (kann man aber auch machen)


<a href="#" class="scrollicon" title="zum Seitenanfang"><div>^</div>< /a>

Wenn nach unten gescrollt wird, soll der Button sichtbar werden, wir nutzen das jQuery Scroll-Event.


$(window).scroll(function(){
if ($(this).scrollTop() > 80) {
$('.scrollicon').fadeIn();
} else {
$('.scrollicon').fadeOut();
}
});

das scrollTop ermittelt die vertikale Position der Scrollbar. Ist diese Position grösser als 80px, wird der Button mit der Klasse scrollicon sanft eingeblendet, im umgekehrten Fall sanft ausgeblendet. Als nächstes brauchen wir den Effekt, das nach oben gescrollt wird, wenn der Button geklickt wird.


$('.scrollicon').click(function(){
$("html, body").animate({ scrollTop: 0 }, 1200);
return false;
});

Die Anweisung scrollTop:0 scrollt komplett nach oben, an die 0px Position.



diese Seite teilen:




Kommentare












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz