Forum für CMS/made simple

mörml

Server-Pate

Registriert: 23. Januar 2011

Beiträge: 443

[GELÖST] Bewegliche Sprungmarken

Hallo zusammen,

am Betreff merkt man vielleicht schon, dass ich mich mit den richtigen Suchparametern schwer tue.
Bei einer recht langen Aufzählung möchte ich gerne Anker einfügen, die sich jederzeit mit dem Scrollen mitbewegen, falls der Betrachter keine Lust mehr hat, bis ganz nach unten zu scrollen (wo dann der Button für "top" sitzt).

Wie nennt sich das? Das gibt es doch bestimmt schon.

Lieben Dank, mörml

---

kann CMSms buchstabieren...

CMSms 1.11.12
PHP 5.5.14

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

Re: [GELÖST] Bewegliche Sprungmarken

Hi,

für mich hat sich diese Lösung bewährt:

 Hier klicken, um den Code zum Kopieren zu markieren

[== Javascript ==]
<script type="text/javascript">
$(document).ready(function(){
	$("#back-to-top").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) { //nach wie vielen Pixeln soll der Button eingeblendet werden
				$('#back-to-top').fadeIn();
			} else {
				$('#back-to-top').fadeOut();
			}
		});
		$('#back-to-top').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800); // wie schnell wird nach oben "gescrollt"
			return false;
		});
	});
});
</script>

Das packe ich immer ganz unten ins Template:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<div id="back-to-top">nach oben</div>

Und das hier (natürlich angepasst) in die CSS Datei:

 Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
#back-to-top {
    position: fixed; /* Wichtig! */
    bottom: 65px; /* Abstand zum Browserrand */
    right: 25px; /* Abstand zum Browserrand */
    cursor: pointer;
    padding: 10px;
    background:  #222;
    color: #fff;
    display: none;
}

Hoffe, es hilft.
Habs z.B. hier so umgesetzt: www.susan-schoene.de

mörml

Server-Pate

Registriert: 23. Januar 2011

Beiträge: 443

Re: [GELÖST] Bewegliche Sprungmarken

Ja, sch... die Wand an, genau so etwas habe ich gesucht!
1000000 Dank, jeff1980!
Thema nach 2 min. gelöst

---

kann CMSms buchstabieren...

CMSms 1.11.12
PHP 5.5.14