web-dev-qa-db-fra.com

Créer un lien en haut d'une page Web sans utiliser d'ancres

J'ai un document HTML qui contient actuellement des liens vers le haut de la page en utilisant une ancre

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

Cependant, je n'aime pas avoir besoin de créer un identifiant inutile et comment le "#topofpage" apparaît dans l'URL après avoir cliqué sur le lien. Y a-t-il autre chose que je puisse faire pour créer un lien vers le haut de la page sans utiliser Javascript? J'ai essayé de retirer complètement l'ancre avec <a href=""> mais cela provoque l'actualisation de la page.

htmlanchor
46
hugomg

Selon HTML5 spec le fragment vide # et le fragment spécial #top va créer un lien vers le haut de la page.

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

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

Il n'est pas nécessaire de créer une ancre correspondante si vous utilisez ces noms de fragments spéciaux.

75
hugomg

Vous pouvez essayer d'utiliser javascript

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

Ou vous pouvez utiliser jQuery

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

Je sais que vous avez dit sans utiliser JavaScript, mais je pense que c'est vraiment le seul moyen d'éviter d'utiliser une véritable ancre. Le jQuery suivant remplacera les ancres par le #top href et effectuez un défilement animé agréable vers le haut sans changer l’URL (voir la page de auteur original pour plus d’informations).

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

jsfiddle pour l'exhaustivité

Cependant, je resterais avec HTML sémantique et utiliserais des ancres afin que le sens approprié puisse être interprété par le nombre maximal de navigateurs. N'oubliez pas les personnes handicapées qui nécessitent des lecteurs d'écran ou d'autres navigateurs spéciaux. Les ancres sont garanties pour fonctionner.

En outre, Google annoncé en 2009 de nouvelles fonctionnalités d'indexation tirant directement parti des ancres de page pour fournir un contexte supplémentaire que le chercheur Web pourrait rechercher. Dans de nombreux cas, un utilisateur est très intéressé par une section de la page. Google peut fournir un lien direct vers cette ancre de la page pour une pertinence optimale.

En bout de ligne de mon point de vue - ne pas les ancres. Utilise les.

5
Sumo

Un autre moyen utile d’utiliser la balise anchor pour obtenir le haut de la page est de:

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

en l'utilisant ainsi, votre page défilera automatiquement en haut de la page en cours. J'espère que cela est utile à quelqu'un.

2
Vash