saut d'ancre à l'aide de javascript

Question

J'ai une question que l'on retrouve très souvent. Le problème est que l'on ne trouve nulle part une solution explicite.

J'ai deux problèmes concernant les ancres.

L'objectif principal doit être d'obtenir une belle url propre, sans hachage, en utilisant des ancres pour accéder à une page.

Donc la structure des ancres est :

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

Ok, si vous cliquez sur l'un des liens, l'URL sera automatiquement changé en

www.domain.com/page#1

A la fin, cela devrait être juste :

www.domain.com/page

Jusqu'à présent, tout va bien. La deuxième chose, c'est que si vous cherchez ce problème sur internet, vous trouverez javascript comme solution.

J'ai trouvé cette fonction :

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

et appeler cette fonction avec :

<a onclick="jumpto('one');">One</a>

ce qui sera le même qu'avant. Il ajoutera le hash à l'url. J'ai aussi ajouté

<a onclick="jumpto('one'); return false;">

sans succès. Si quelqu'un peut me dire comment résoudre ce problème, j'apprécierais vraiment.

Merci beaucoup.

Answer 1

Vous pouvez obtenir les coordonnées de l'élément cible et définir la position de défilement en fonction de celles-ci. Mais c'est très compliqué.

Voici une façon plus paresseuse de le faire :

function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}

Cela utilise replaceState pour manipuler l'url. Si vous voulez aussi support pour IE alors vous devrez le faire de la manière suivante manière compliquée :

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​

Démonstration : http://jsfiddle.net/DerekL/rEpPA/
Un autre avec une transition : http://jsfiddle.net/DerekL/x3edvp4t/

Vous pouvez également utiliser .scrollIntoView :

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

_{<em>(Bon, j'ai menti. Ce n'est pas compliqué du tout.)</em>}

Answer 2

Je pense que c'est une solution beaucoup plus simple :

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

Cette méthode permet ne pas recharger le site web, et définit le focus sur les ancres qui sont nécessaires pour le lecteur d'écran.

Answer 3

Je n'ai pas assez de représentants pour faire un commentaire.

El getElementById() dans la réponse choisie ne fonctionnera pas si le point d'ancrage a name mais pas id (ce qui n'est pas recommandé, mais se produit dans la nature).

À garder à l'esprit si vous n'avez pas le contrôle du balisage du document (par exemple, une extension web).

El location dans la réponse choisie peut également être simplifiée avec la méthode suivante location.replace :

function jump(hash) { location.replace("#" + hash) }

Answer 4

Parce que quand vous le faites

window.location.href = "#"+anchor;

Vous chargez une nouvelle page, vous pouvez le faire :

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

Answer 5

J'ai un bouton pour une invite qui, lorsqu'on clique dessus, ouvre le dialogue d'affichage et je peux alors écrire ce que je veux rechercher et cela va à cet endroit de la page. Il utilise le javascript pour répondre à l'en-tête.

Dans le fichier .html, j'ai :

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

Dans le fichier .js, j'ai

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

Quand j'écris test100 dans l'invite, puis il ira à l'endroit où j'ai placé span id="test100" dans le fichier html.

J'utilise Google Chrome.

Note : Cette idée provient d'un lien sur la même page utilisant

<a href="#test100">Test link</a>

qui, en cliquant, sera envoyé à l'ancre. Pour que cela fonctionne plusieurs fois, l'expérience montre qu'il faut recharger la page.

Crédit aux personnes de stackoverflow (et peut-être stackexchange, aussi) je ne me souviens pas comment j'ai rassemblé tous les morceaux. ☺