2012-08-01 9 views
32

tengo un documento HTML que actualmente tiene algunos enlaces a la parte superior de la página utilizando un anclacrear un enlace al principio de una página web sin necesidad de utilizar anclas

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

Sin embargo, no me gusta necesidad para crear una identificación inútil y cómo aparece la "#topofpage" en la URL después de hacer clic en el enlace. ¿Hay algo más que pueda hacer para vincular a la parte superior de la página sin usar Javascript? Traté de eliminar el ancla por completo con <a href="">, pero eso causa que la página se actualice.

Respuesta

52

According to the HTML5 especificación del fragmento vacío # y el fragmento especial #top unirá a la parte superior de la página.

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

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

No es necesario crear un anclaje coincidente si utiliza estos nombres especiales de fragmento.

+17

La especificación HTML5 define un fragmento especial "#top" que se puede usar para vincular a la parte superior del documento. No es necesario definir explícitamente un elemento con una ID de "arriba". Ver la [nota href] de Mozilla (https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/a # attr-href). –

10

Usted puede intentar usar javascript

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

O puede usar jQuery

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

Si lo hago, falla si hago clic en el enlace "abrir en una pestaña nueva". ¿Usar Javascript como esta es realmente la única manera? Además, ¿la función de desplazamiento es un navegador cruzado? – hugomg

+2

Javascript es la única forma – user1513192

4

Sé que lo dijo sin usar JavaScript, pero creo que es la única forma de evitar el uso de un ancla real. El siguiente jQuery reemplazará los anclajes con el href #top y realizará un bonito desplazamiento animado hacia la parte superior sin que cambie el URL (consulte la página original author para obtener más información).

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

jsfiddle for completeness

Sin embargo, me gustaría seguir con semantic HTML y utilizar anclajes para su propósito para que el significado apropiado puede ser interpretado por el máximo número de navegadores. No se olvide de las personas con discapacidades que requieren lectores de pantalla u otros navegadores especiales. Los anclajes están garantizados para funcionar.

Además de eso, Google announced in 2009 algunas nuevas características de indexación que aprovechan directamente los anclajes in-page para proporcionar un contexto adicional que el buscador web podría estar buscando. En muchos casos, puede haber una sección de una página en la que un usuario esté muy interesado. Google puede proporcionar un enlace directo a ese ancla de la página para una relevancia óptima.

En pocas palabras desde mi punto de vista - no desconecte los anclajes. Usalos, usalos a ellos.

-5

<a href="?">top</a> lo llevará hasta allí.

+2

Esto vuelve a cargar la página. – BoltClock

2

Otra forma útil de utilizar la etiqueta de anclaje para obtener la parte superior de la página es

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

usarlo como esto hace que su página de desplazarse automáticamente a la parte superior de la página actual. Espero que sea útil para alguien.

Cuestiones relacionadas