2012-08-01 6 views
32

Ho un documento HTML che ha attualmente alcuni link nella parte superiore della pagina utilizzando un ancoraggioCreare un collegamento alla parte superiore di una pagina Web senza usare Ancore

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

Tuttavia, non mi piace che necessitano per creare un id inutile e come appare "#topofpage" nell'URL dopo aver fatto clic sul link. C'è qualcos'altro che posso fare per collegarmi alla parte superiore della pagina senza usare Javascript? Ho provato a rimuovere completamente l'ancora con <a href=""> ma questo fa sì che la pagina si aggiorni.

risposta

52

According to the HTML5 spec il frammento vuoto # e il frammento speciale #top collegherà alla parte superiore della pagina.

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

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

Non è necessario creare un ancoraggio corrispondente se si utilizzano questi nomi di frammenti speciali.

+17

La specifica HTML5 definisce un frammento speciale "#top" che può essere utilizzato per collegarsi all'inizio del documento. Non c'è bisogno di definire esplicitamente un elemento con un ID di "top". Vedi [href note] di Mozilla (https: //developer.mozilla.org/it-IT/docs/Web/HTML/Elemento/a # attr-href). –

10

Puoi provare a utilizzare javascript

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

Oppure si può utilizzare jQuery

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

Se lo faccio fallisce se clicco sul link con "apri in una nuova scheda". Usare Javascript come questo è davvero l'unico modo? Inoltre, la funzione di scorrimento è cross-browser? – hugomg

+2

Javascript è l'unico modo – user1513192

4

So che hai detto senza usare JavaScript, ma penso che sia davvero l'unico modo per evitare di usare una vera ancora. Il seguente jQuery sostituirà gli ancoraggi con lo #top href ed eseguirà uno scorrimento animato verso l'alto senza modificare l'URL (vedere la pagina original author per maggiori informazioni).

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

jsfiddle for completeness

Tuttavia, vorrei bastone con semantic HTML e utilizzare gli ancoraggi per il loro scopo in modo che il significato corretto può essere interpretato dal numero massimo di browser. Non dimenticare le persone con disabilità che richiedono screen reader o altri browser speciali. Le ancore sono garantite per funzionare.

In aggiunta a ciò, Google announced in 2009 alcune nuove funzionalità di indicizzazione che sfruttano direttamente gli ancoraggi in-page per fornire un contesto aggiuntivo che potrebbe essere ricercato dal cercatore web. In molti casi, potrebbe esserci una sezione di una pagina a cui un utente è molto interessato. Google può fornire un collegamento diretto a quell'ancora della pagina per una pertinenza ottimale.

Bottom line dal mio punto di vista - non dis-ancore. Usali.

-5

<a href="?">top</a> ti porterà lì.

+2

Ricarica la pagina. – BoltClock

2

Un altro modo utile di usare il tag di ancoraggio per ottenere la parte superiore della pagina è

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

usarlo come questo rende la vostra pagina di scorrere automaticamente alla parte superiore della pagina corrente. Spero che questo sia utile a qualcuno.