2012-08-01 5 views
32

ich ein HTML-Dokument, das zur Zeit einige Links zum Seitenanfang benötigen mit einem Anker haterstellen Link zur Startseite eines Web-Seite ohne Verwendung von Anchors

<body id="topofpage"> 
    ... 
    <a href="#topofpage">Go to top</a> 

aber ich weiß nicht wie um eine nutzlose ID zu erstellen und wie die "#topofpage" in der URL angezeigt wird, nachdem ich auf den Link geklickt habe. Gibt es noch etwas, was ich tun kann, um ohne JavaScript auf den Anfang der Seite zu verlinken? Ich habe versucht, den Anker vollständig mit <a href=""> zu entfernen, aber das bewirkt, dass die Seite aktualisiert wird.

Antwort

52

According to the HTML5 spec das leere Fragment # und dem speziellen Fragment #top zum Seitenanfang verbinden wird.

<a href="#">Go to top</a> 

<a href="#top">Go to top</a> 

Es ist nicht erforderlich, einen passenden Anker zu erstellen, wenn Sie diese speziellen Fragmentnamen verwenden.

+17

Die HTML5-Spezifikation definiert ein spezielles Fragment "#top", das verwendet werden kann, um mit dem Anfang des Dokuments zu verknüpfen. Es muss kein Element explizit mit der ID "top" definiert werden. Siehe Mozillas [href note] (https: //developer.mozilla.org/de-DE/docs/Web/HTML/Element/a # attr-href). –

10

können Sie versuchen, mit Hilfe von Javascript

<a onclick="scroll(0,0)">

Oder Sie können jQuery

$("#Top").click(function(){ 
scroll(0,0); 
}); 
+0

Wenn ich das tue, schlägt es fehl, wenn ich auf den Link mit "in einem neuen Tab öffnen" klicke. Ist das Verwenden von Javascript so wirklich der einzige Weg? Ist die Scroll-Funktion auch Cross-Browser? – hugomg

+2

Javascript ist die einzige Möglichkeit – user1513192

4

Ich weiß, dass Sie ohne JavaScript zu sagen, aber ich denke, das ist wirklich die einzige Möglichkeit, einen echten Anker zu vermeiden. Die folgende jQuery ersetzt Anker mit der #top href und führt eine nette animierte Bildlauf nach oben ohne die URL ändern (siehe die original author 's Seite für weitere Informationen).

$(document).ready(function() { 
    $('a[href=#top]').click(function(){ 
     $('html, body').animate({scrollTop:0}, 'slow'); 
     return false; 
    }); 
}) 

jsfiddle for completeness

Allerdings würde ich mit semantic HTML bleiben und Anker für ihre Zwecke verwenden, so dass die eigentliche Bedeutung kann durch die maximale Anzahl von Browsern interpretiert werden. Vergessen Sie nicht Menschen mit Behinderungen, die Screenreader oder andere spezielle Browser benötigen. Anker funktionieren garantiert.

Darüber hinaus Google announced in 2009 einige neue Indizierung Funktionen, die direkt von In-Page-Anker nutzen, um zusätzlichen Kontext, den der Web-Sucher möglicherweise suchen, bieten. In vielen Fällen gibt es einen Abschnitt einer Seite, an dem ein Nutzer sehr interessiert ist. Google kann für eine optimale Relevanz einen direkten Link zu diesem Anker der Seite bereitstellen.

Fazit aus meiner Sicht - nicht die Anker. Benutze sie.

-5

<a href="?">top</a> wird Sie dorthin bringen.

+2

Dies lädt die Seite neu. – BoltClock

2

Ein weiterer nützlicher Weg, um den Anker-Tages der Verwendung ist es, die oben auf der Seite zu bekommen

<a href='#top'> Go back to the top of the page.</a> 

es so macht Ihre Seite automatisch scrollen Sie zum Anfang der aktuellen Seite verwendet wird. Hoffe das ist für jemanden nützlich.