find-templates

Top-Button

zurück zur Übersicht

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

Heute: 5 Besucher