find-templates - Top-Button

Top-Button

Mit einem "Top-Button" können wir am Ende einer Seite wieder nach oben springen,
ohne das der Besucher scrollen muss. Ideal für lange Seiten ohne "Blätterfunktion".
Der Button erscheint erst beim Scrollen nach unten.

Schritt 1: Den CSS Code einfügen

Mit folgendem CSS-Code lässt sich der "Button" gestalten

Baukasten-Design "CSS" : Einfügen im Feld "css ohne style tags"
Alle anderen Baukasten-Designs: Einfügen im Feld "Text über Design"
dort dann vor dem --></style">

/* Position */
#nach_oben {
  position: fixed;
  bottom: 30px;
  margin-left: -150px; }

/* Aussehen des Buttons */
#nach_oben a {
 width: auto;
 padding: 7px 12px 7px 17px;
 display: block;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #FFFFFF;
 font-size: 11px;
 font-family: arial;
 background-color: #006464;
 
/* abgerundete Ecken */
 border: 1px solid #c9c9c9;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s; }

/* Hover bei Mauskontakt */
#nach_oben a:hover {
 color: #000;
 background-color: orange;}

color: Hier die Textfarbe bestimmen
font-size: Hier die Schriftgröße bestimmen
background-color: Hier die Hintergrundfarbe bestimmen

Schritt 2: Javascript einfügen

Für den Slide-Effekt und Fade-Effekt (Ein + Ausblenden und verzögertes Hochfahren)

auf "Eigene Seiten editieren"
wähle Seite aus, die den Button bekommen soll
oben links im Editor (Werkzeugleiste) auf "Quellcode" klicken
der Inhalt wird nun als HTML-Code angezeigt
füge zu Beginn der Seite folgendes Script ein

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

	// hide #nach_oben first
	$("#nach_oben").hide();
	
	// fade in #nach_oben
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#nach_oben').fadeIn();
			} else {
				$('#nach_oben').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#nach_oben a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>

Schritt 3: Den Button einfügen

Es handelt sich hier um verlinkten Text (mit Rahmen + gerundeten Ecken).
Das Aussehen könnt Ihr im "CSS-Code" (Schritt 1) bestimmen.

auf "Eigene Seiten editieren"
wähle Seite aus, die den Button bekommen soll
oben links im Editor (Werkzeugleiste) auf "Quellcode" klicken
der Inhalt wird nun als HTML-Code angezeigt
am Ende füge folgenden HTML-Code ein

<p id="nach_oben">
<a href="#top">Zurück nach oben</a>
</p>

Den Text Zurück nach oben könnt ihr natürlich ändern.

Info:
Der "CSS-Code" wird nur einmal eingefügt (siehe Schritt 1).
Jede Seite, die einen "Top-Button" bekommen soll, benötigt nur noch
die beiden Codes von Schritt 2 und Schritt 3.

Zurück nach oben