Supprimer les balises d'ancrage de l'URL - javascript, jquery

J'utilise un groupe de balises d'ancrage pour la navigation mobile en raison d'une très longue page, mais lorsque vous cliquez sur la balise d'ancrage, elle l'ajoute à l'URL. Voici une petite maquette,

<a href="#anchor">page down</a>

<span id="anchor"></span>

Comment puis-je conserver la fonctionnalité d'ancrage et empêcher que #anchor soit ajouté à l'URL?

À votre santé

Réponses:

6 pour la réponse № 1

Vous pourriez utiliser scrollTop pour obtenir le même effet:

$(".js-hook--page-down").click(function (e) {
e.preventDefault();

$("html, body").animate({
scrollTop: $("#anchor").offset().top - 200
}, 1500);
});

Et le HTML:

<a class="js-hook--page-down">page down</a>

<span id="anchor"></span>

Vous avez cependant besoin d'un nouveau crochet Js pour chacune des ancres de page.

---

0 pour la réponse № 2

C’est à vous de décider comment vous voulez, mais je ferais ceci:

<script type="text/javascript">

$(window).on("hashchange", function(e){ // listen if hashtag is being added to the URL

location.href = location.href.replace(location.hash,"") //replace it with nothing
console.log("bam!"); //enjoy it

});

</script>

---

0 pour la réponse № 3

@DGibbs J'ai modifié votre code afin que, plutôt que de l'écrire pour chaque ancre de la page, vous puissiez l'utiliser à la place.

$(".js-anchor").click(function (evt) {
evt.preventDefault();
var anchor = $(this).text();

$("html, body").animate({
scrollTop: $("#" + anchor).offset().top
}, 1500);
});

Peut-être que cela aidera aussi quelqu'un d'autre. Pour référence le html ressemble à ceci

<a class="js-anchor">Top</a>


<span id="Top"></span>

Évidemment, avec ce code, votre identifiant d'ancre doit correspondre au texte à l'intérieur du lien pour que cela fonctionne.

---

-1 pour la réponse № 4

Ajouter click écouteur d'événement à vos liens et utiliser preventDefault.

$(".mylink").click(function(event){
event.preventDefault();
});

Cela empêchera les liens de modifier les URL.

---