Rimozione dei tag di ancoraggio dall'URL - javascript, jquery

Sto usando un sacco di tag di ancoraggio per la navigazione mobile a causa di una pagina molto lunga ma quando si fa clic sul tag di ancoraggio lo aggiunge all'URL. Ecco un piccolo mock,

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

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

Come posso conservare la funzionalità di ancoraggio e impedire che #anchor venga aggiunto all'URL?

Saluti

risposte:

6 per risposta № 1

Potresti usare scrollTop per ottenere lo stesso effetto:

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

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

E l'HTML:

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

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

Tuttavia, è necessario un nuovo gancio js per ciascuna delle ancore di pagina.

---

0 per risposta № 2

Dipende da te come vorresti farlo, ma farei questo:

<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 per risposta № 3

@DGibbs Ho preso il tuo codice e l'ho modificato in modo che invece di doverlo scrivere per ogni ancoraggio nella pagina puoi usare questo

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

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

Forse questo aiuterà anche qualcun altro. Per riferimento l'html assomiglia a questo

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


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

Ovviamente con questo codice il tuo ID di ancoraggio deve corrispondere al testo all'interno del link affinché funzioni

---

-1 per risposta № 4

Inserisci click listener di eventi per i tuoi link e utilizzo preventDefault.

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

Questo impedirà ai link di modificare gli URL.

---