Créer un Lien vers le Haut d'une Page Web Sans l'Aide d'Ancres

J'ai un document HTML qui dispose actuellement de quelques liens en haut de la page à l'aide d'une ancre

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

Cependant, je n'aime pas avoir à créer un inutile id et comment le "#topofpage" s'affiche dans l'URL après je clique sur le lien. Est-il autre chose que je peux faire pour le lien vers le haut de la page sans l'aide de Javascript? J'ai essayé de supprimer le point d'ancrage complètement avec <a href=""> mais qui provoque la page pour actualiser.

InformationsquelleAutor hugomg | 2012-08-01
  1. 73

    Selon le HTML5 spec le vide fragment # et le fragment #top 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 correspondance d'ancrage si vous utilisez ces fragment de noms.

    • La spec HTML5 définit un spécial fragment "#top" qui peut être utilisé pour le lien vers le haut du document. Pas besoin de définir explicitement un élément avec un ID de "top". Voir Mozilla href remarque.
    • Cette réponse répond à la question d'origine, mais il a des impacts négatifs sur l'accessibilité. Si vous onglet à l'un de ces liens et appuyez sur entrée, la prochaine fois que vous onglet le lien après le Retour À la page des liens. Alors que si vous allez avec le balisage dans la question d'origine, de tabulation continuera à le lien après l'élément de destination. Pour cette raison, je vous suggère d'utiliser le balisage dans la question d'origine.
    • c'est sûrement l'un de l'accessibilité bug dans le navigateur?
    InformationsquelleAutor hugomg
  2. 11

    Vous pouvez essayer d'utiliser javascript

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

    Ou vous pouvez utiliser jQuery

    $("#Top").click(function(){
 scroll(0,0);
});
    • Si je fais ça il échoue si je clique sur le lien avec la fonction "ouvrir dans un nouvel onglet". Est l'aide de Javascript comme ce vraiment le seul moyen? Aussi, est la fonction de défilement de la croix-navigateur?
    • Javascript est le seul moyen
    • Je souhaite qu'il l'a fait, mais je ne pense pas que cela va fonctionner sur tous les navigateurs: developer.mozilla.org/en-US/docs/Web/API/Window/...
    InformationsquelleAutor user1513192
  3. 5

    Je sais que vous avez dit, sans l'aide de JavaScript, mais je pense que c'est vraiment la seule façon d'éviter l'utilisation d'un réel ancrage. La suite de jQuery remplacera ancres avec la #top href et d'effectuer une belle animation de défilement vers le haut sans l'URL change (voir la auteur original's page pour plus d'infos).

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

    jsfiddle pour l'exhaustivité

    Cependant, je m'en tiendrais à HTML sémantique et l'utilisation des ancrages de leur but, de sorte que le bon sens peut être interprété par le nombre maximum de navigateurs. N'oubliez pas les personnes handicapées qui nécessitent des lecteurs d'écran ou d'autres navigateurs. Les ancres sont garantis de travailler.

    En plus de cela, Google annoncé en 2009 certains indexation de nouvelles fonctionnalités directement profiter de la page d'ancres de fournir plus de contexte que l'internaute pourrait être à la recherche pour. Dans de nombreux cas, il pourrait y avoir une section d'une page que l'utilisateur est très intéressé par. Google peut fournir un lien direct vers cette ancre de la page pour optimiser la pertinence.

    Ligne de fond de mon point de vue - ne dis pas que les ancres. Les utiliser.

    InformationsquelleAutor Sumo
  4. 2

    Un autre moyen utile d'utiliser la balise d'ancrage pour obtenir le haut de la page est 

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

    de l'utiliser comme cela rend votre page de faire défiler automatiquement les haut de la page actuelle. Espérons que cela est utile à quelqu'un.

    InformationsquelleAutor Vash
  5. -5

    <a href="?">top</a> vous y arrivez.

    • Il recharge la page.
    InformationsquelleAutor Bret A. Lucas