7.8.12
'Smooth' scroll back to Top
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; ">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.
<a href="#top">
<span></span>
</a>
</div>
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'>Dann wird eine Funktion definiert, die ab einer Höhe von 200px den Container dynamisch einblendet, darüber wieder ausblendet.
//<![CDATA[
$(document).ready(function(){
// hide #back-top
$("#back-top").hide();
//
});
//]]>
</script>
<script type='text/javascript'>Im letzten Schritt wird per Klick auf den Anker eine Funktion geschrieben, die den Blog wieder sanft nach oben scrollt:
//<![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>
<script type='text/javascript'>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.
//<![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>
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 FunktionDie Funktion für das dynamische einblenden bei einer Höhe kleiner als 20px über der Grundlinie sähe nun so aus:
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
<script type='text/javascript'>Der Rest bleibt gleich - das ganze Script am Stück:
//<![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>
<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>