mit jQuery (zum Seitenanfang) scrollen

Dieses jQuery-Script scrollt hoch zum Seitenanfang.

Dafür habe ich, wie “früher”, am Anfang einen Anker im Quellcode gesetzt:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Der Rest ist das eigentliche jQuery-Script …


<script type="text/javascript">
$(document).ready(function() {
    $('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
    });
});
</script>

Durch das <a name=”top”> funktioniert es mit und ohne JavaScript-Unterstützung.

Und alle Links zu anderen Websiten funktionieren auch noch.

via electrictoolbox

mit jQuery hoch- und runterscrollen

Eine andere Möglichkeit, die alle #-Links zum scrollen bringt, aber Links, wie seite.htm#anfang trotzdem im neuen Browserfenster öffnet sieht so aus:


$(document).ready(function() {
    $('a[href^=#]').bind("click", function(event) {
	    event.preventDefault();
	    var ziel = $(this).attr("href");
	    if ($.browser.opera) {
	        var target = 'html';
	    }else{
		var target = 'html,body';
	    }
	    $(target).animate({
		scrollTop: $(ziel).offset().top
	    }, 2000 , function (){location.hash = ziel;});
    });
    return false;
});

Im HTML ist ganz genau gleich wie oben:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Das $('a[href*=#]'), wie bei drweb gefunden, habe ich zu $('a[href^=#]') geändert.

Das deshalb, weil $('a[href*=#]') alle Links aussucht, die eine Raute (#) darin haben. Das ist deshalb ungünstig, weil man, wenn man auf andere Seiten verweist mit einer Raute darin (seite.htm#anfang), der Link einfach nicht mehr funktioniert.

Das konnte ich mit $('a[href^=#]') verhindern. Jetzt sucht er nicht mehr alle Links, die eine Raute haben, sondern nur die, die mit der Raute anfangen.


Kommentare & Trackbacks

  1. Kommentar von Mika:

    Gravatar von Mika

    Hey danke, super erklärt.

    Gruß Mika

  2. Kommentar von Mark:

    Gravatar von Mark

    Muss ich auch sagen. Habe schon länger nach einer knappen Erklärung dieser Sache gesucht. Zufällig hier gefunden.

    Ich meine, das ist doch die Sache mit dem Löschen des #-Tags aus der URL?

Kommentar schreiben

* Pflichtfelder