• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Navigation: Link mit Anker - Sanftes nach unten gleiten (z.B. Bootsprap Template)

LikeStar

New member
Hallo Community,

ich bin weiter am Programmieren und habe also meine Navigation:
HTML:
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>


HTML:
<div id="navi">
 <a href="#uberuns" class="btn">Über uns</a>
 <a href="#referenzen" class="btn">Referenzen</a>
 <a href="#kontakt" class="btn">Kontakt</a>
</div>

Mit Jquery möchte ich ein sanftes "nach unten gleiten" einbauen, wenn
der Nutzer auf eines der Links drückt.

Dann scrollt sich die Seite von "alleine".

Glaubt mir, ich war schon am Suchen über Google, aber nicht Alle Scripte
scheinen reibungslos zu funktionieren.

Kann mir da Jemand ein Tipp geben?
Schöne viele Grüße

Edit: Hab's selbst hingekriegt mit folgendem Code:

HTML:
<script type="text/javascript"> 
	
	$(document).ready(function() {
		// Alle internen Links auswählen
		$('a[href*=#]').bind("click", function(event) {
			// Standard Verhalten unterdrücken
			event.preventDefault();
			// Linkziel in Variable schreiben
			var ziel = $(this).attr("href");
			//Scrollen der Seite animieren, body benötigt für Safari
			$('html,body').animate({
				//Zum Ziel scrollen (Variable)
				scrollTop: $(ziel).offset().top
			// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
			}, 2000 , function (){location.hash = ziel;});
	   });
	return false;
	});
</script>
 
Zuletzt bearbeitet:
Zurück
Oben