Collegamento di ancoraggio HTML senza scorrimento o salto

Question

Ho vari collegamenti che hanno tutti ID univoci che sono " pseudo-ancore. " Voglio che influenzino il valore dell'hash dell'URL e la magia del clic è gestita da un codice mootools. Tuttavia, quando faccio clic sui collegamenti, scorrono verso se stessi (o verso l'alto in un caso). Non voglio scorrere da nessuna parte, ma ho anche bisogno del mio javascript per eseguire e avere il valore hash nell'aggiornamento dell'URL.

Codice di esempio simulato:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Quindi, se dovessi fare clic sul " pulsante 1 " link, l'URL potrebbe essere http://example.com/foo.php#button1

Qualcuno ha qualche idea per questo? Semplicemente avere un vuoto di ritorno javascript uccide lo scorrimento ma uccide anche il mio javascript (anche se probabilmente potrei aggirare quello con un clic) ma, cosa più importante, impedisce che il valore di hash nell'URL cambi.

Answer 1

Probabilmente mi manca qualcosa, ma perché non dare loro solo ID diversi?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

O qualunque convenzione tu preferisca.

Answer 2

L'intero punto di un collegamento di ancoraggio è scorrere una pagina fino a un punto particolare. Quindi, se non vuoi che ciò accada, devi allegare un onclick gestore e restituire false. Anche solo aggiungendolo come attributo dovrebbe funzionare:

<a href="#button1" id="button1" onclick="return false">button 1</a>

Un lato dell'effetto di quanto sopra è che l'URL stesso non cambierà, poiché la restituzione di false annullerà l'evento. Pertanto, poiché si desidera che l'URL cambi effettivamente, è possibile impostare la variabile window.location.hash sul valore desiderato (questa è l'unica proprietà dell'URL che è possibile modificare senza che il browser imponga un ricaricamento). Probabilmente puoi collegare un gestore di eventi e chiamare qualcosa come window.location.hash = this.id anche se non sono sicuro di come i mootools gestiscono gli eventi.

(Inoltre, è necessario che tutti gli ID siano univoci)

Answer 3

È possibile utilizzare il codice seguente per evitare lo scorrimento:

<a href="javascript:void(0);">linktxt</a>

Answer 4

Ho trovato la soluzione. Qui salvo una vecchia posizione dal chiamare href e ripristinalo dopo lo scorrimento

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

e nel corpo della pagina

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Grazie a sitepoint

Answer 5

Inoltre, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

Un modo più semplice sarebbe probabilmente quello di aggiungerlo come GET. Cioè, http://example.com/foo.php?q=#button1 anziché http://example.com/foo.php#button1

Questo non avrà alcun effetto sul modo in cui la pagina viene visualizzata (a meno che tu non lo voglia) e la maggior parte dei linguaggi di scripting ha già strumenti in atto per leggere (e in modo sicuro) i dati.

Answer 7

Bene, siamo qui 7 anni dopo la pubblicazione di questa risposta e ho trovato un modo diverso per farlo funzionare: basta puntare window.location.hash su un'ancora inesistente! Non funziona per <a> s ma funziona perfettamente in <div> s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Ha funzionato bene in Chrome 56, Firefox 52 e Edge (IE?) 38. Un altro aspetto positivo è che questo non produce errori o avvisi sulla console.

Spero che aiuti qualcuno oltre a me.