Wer kennt das nicht: Ihr besucht eine Seite, lest und lest und irgendwann seid ihr am Ende der Seite angekommen und wollt wieder ganz hinauf. Es gibt natürlich die Möglichkeit mittels dem seitlichen Scrollbalken oder auch dem Scrollrad der Maus zum Anfang der Seite zu gelangen.
Oder aber ihr baut euch einen 'Back to Top'-Button auf der rechten unteren Ecke eurer Webseite ein, mit dem ihr durch einen Klick sofort auf den Anfang gelangt. Dieser ist fixiert und wandert immer an der selben Position beim Hinunterscrollen mit. Finde ich sehr praktisch.
Wie man diesen dynamischen 'Back to Top'-Button einbaut das zeige ich euch nun. Ist absolut nicht schwer und man muss dazu auch nicht in den Untiefen des html-Codes stöbern. Den nachstehenden Code passt ihr nach euren Wünschen an und fügt diesen dann mittels eines Gadgets im Layout-Bereiches des Dashboardes ein.
Folgenden Code passt ihr euch an:
<div id="back-top" style="display: block; ">
<a href="#top">
<span></span>
</a>
</div>
<style>
#back-top {
position: fixed;
bottom: 25px;
right:35px;
z-index: 10
}
#back-top span {
display: block;
background: #f9f9f9;
border-color: rgba(51, 51, 51, .5) rgba(51, 51, 51, .5) transparent transparent;
border-style:solid;
border-width:5px;
transform: rotate(-45deg);
width:20px;
height:20px;
position: relative;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
}
#back-top span:hover{
top: -5px;
border-color: rgba(77, 77, 77, 1) rgba(77, 77, 77, 1) transparent transparent;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
}
#back-top span:after{
content:"";
background: #f9f9f9;
border-color: rgba(51, 51, 51, .5) rgba(51, 51, 51, .5) transparent transparent;
border-style:solid;
border-width:5px;
width:25px;
height:25px;
position: absolute;
top: 10px;
right: 10px;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
}
#back-top span:hover:after{
top: 5px;
right: 5px;
border-color: rgba(77, 77, 77, 1) rgba(77, 77, 77, 1) transparent transparent;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
}
</style>
<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() > 600) {
$('#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>
Noch ein wenig zur Erklärung, damit ihr euren Code selbst anpassen könnt:
<style> .... </style>= dieser Bereich definiert das Aussehen des Button
position: fixed = absolute Positionierung beim Browserfenster. Bleibt beim Scrollen stehen.
bottom = Position von unten
z-index = Schichtposition bei Überlappung. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.
border-color: rgba(51, 51, 51, .5)= Farbe der beiden Pfeile bzw. Farbe der beiden Pfeile beim Mouse-over Effekt als RGB-Farbcode
dieses findet man an mehreren Stellen:
#back-top span {
#back-top span:hover{
#back-top span:hover:after{ Diesen html-Code fügt ihr nun in euer Layout ein:
1 // Layout >> Gadget hinzufügen
2 // Wählt das Gadget: HTML/JavaScript aus und in dieses Fenster kopiert ihr den Code
3 // Dieses Gadget positioniert ihr nun im Layout-Bereich unter 'Blogposts'
4 // Nun nur noch das Layout speichern.
//// bloglovin /// facebook /// Instagram ///
