web-dev-qa-db-fra.com

ancre sautant en utilisant javascript

J'ai une question qui sera trouvée très souvent. Le problème est que nulle part ne peut être trouvée une solution explicite.

J'ai deux problèmes concernant les ancres.

L’objectif principal devrait être d’obtenir une belle URL propre sans aucun hachage tout en utilisant des ancres pour sauter d’une page.

La structure des ancres est donc:

<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 se changera automatiquement en 

www.domaine.com/page#1

À la fin, cela devrait être juste:

www.domaine.com/page

Jusqu'ici tout va bien. Deuxièmement, lorsque vous recherchez ce problème sur Internet, vous trouverez javascript comme solution.

J'ai trouvé cette fonction:

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

et en appelant cette fonction avec:

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

ce qui sera le même comme avant. Il va ajouter le hash à l'URL. J'ai aussi ajouté

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

sans succès. Donc, s'il y a quelqu'un qui pourrait me dire comment résoudre ce problème, j'apprécierais vraiment.

Merci beaucoup.

javascripthtmlfunctionanchorhref
104
bonny

Vous pouvez obtenir les coordonnées de l'élément cible et lui attribuer la position de défilement. Mais c'est tellement 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.
}
_

Ceci utilise replaceState pour manipuler l'URL. Si vous voulez aussi support pour IE , alors vous devrez le faire comme 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émo: http://jsfiddle.net/DerekL/rEpPA/
Un autre avec transition: http://jsfiddle.net/DerekL/x3edvp4t/

Vous pouvez également utiliser .scrollIntoView :

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

(ben j'ai menti. Ce n'est pas compliqué du tout.)

174
Derek 朕會功夫

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

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

Cette méthode ne ne recharge pas le site Web et définit le focus sur les ancres de ce qui est nécessaire pour le lecteur d'écran.

11
Adam111p

J'ai un bouton pour une invite qui, en cliquant dessus, ouvre la boîte de dialogue d'affichage. Ensuite, je peux écrire ce que je veux rechercher. Il utilise javascript pour répondre à l'en-tête.

Sur le fichier .html, j'ai: 

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

Sur 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, il ira à l'endroit où j'ai placé span id = "test100" dans le fichier html. 

J'utilise Google Chrome.

Remarque: cette idée provient de la création de liens sur la même page à l'aide de

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

qui sur le clic enverra à l'ancre. Pour que cela fonctionne plusieurs fois, l'expérience nécessite de recharger la page. 

Le crédit pour les personnes chez stackoverflow (et éventuellement stackexchange aussi) ne se souvient pas comment j'ai rassemblé tous les morceaux. ☺

1
S.Doe_Dude

Pas assez de rep pour un commentaire.

La méthode basée sur getElementById () dans la réponse sélectionnée ne fonctionnera pas si l'ancre a défini name mais pas id (ce qui n'est pas recommandé, mais se produit à l'état sauvage).

A garder à l’esprit si vous n’avez pas le contrôle du balisage du document (par exemple, Webextension).

La méthode basée sur location dans la réponse sélectionnée peut également être simplifiée avec location.replace:

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

Parce que quand tu fais 

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

Vous chargez une nouvelle page, vous pouvez 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>
0
Jonathan Tribouharet Vukovich