Design Clean
    >> Tipps zum anpassen

Zurück nach oben

Der "Zurück nach Oben" -Button

Bei langen Seiten / Seiten mit viel Inhalt können wir dem Besucher das "Zurück-Scrollen" ersparen. Der Besucher klickt auf den Button "nach Oben" und gelangt wieder zum Menü.


  • Schritt 1: Der CSS-Code
  • auf "Extras" gehen
  • Extra "Eigener <head> Inhalt" wählen
  • stehen dort schon CSS-Codes ?
  • dann vor dem --> </style> mit einfügen

  • noch keine CSS-Codes vorhanden ?
  • dann bitte die style-tag mit einfügen
  • vor dem Code <style type="text/css"><!--
  • und nach dem Code --> </style>

/* Position */
#nach_oben { position: fixed; bottom: -50px; margin-left: 43%; }

/* Aussehen des Buttons */
#nach_oben a {
 width: auto;
 height: 70px;
 line-height: 50px;
 padding: 0px 25px 0px 25px;
 display: block;
 text-decoration: none;
 font-size: 12px;
 color: #FFFFFF;
 background-color: #006464;
 border: 1px solid #c9c9c9;
 border-radius: 15px;
 transition: 1s; }

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

  • Schritt 2: Der Javascript-Code
  • wir bleiben bei "Extras"
  • das Feld "Eigener <head> Inhalt"
  • Javascript nach dem --> </style> einfügen
  • siehe auch Beispiel-Grafik oben rechts

<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() > 300) {
				$('#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: Der HTML-Code des Buttons
  • auf "Design" gehen
  • auf "Designeinstellungen"
  • auf "Erweiterte Designeinstellungen"
  • einfügen im Feld "Text UNTER Design"
  • befindet sich dort schon Inhalt ?
  • dann am Ende einfügen

<p id="nach_oben">
<a href="#top">nach Oben</a>
</p>

Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :26 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben