Entfernen Sie href Werte von der URL

Question

<a href="#get1"><button type="button" class="btn btn-outline-info btn-sm">GET</button></a> 

So habe ich eine Reihe dieser Anker auf mehreren Seiten. Sie verlinken nicht auf eine andere Seite, sondern scrollen einfach den Benutzer zu dem Abschnitt mit der gleichen ID.

Wenn Sie darauf klicken, fügt '# get1' zur URL hinzu, gibt es diese Funktion trotzdem zu entfernen/deaktivieren?

Answer 1

Ja, durch Hijacking mit jQuery (oder plain JS, aber Sie haben ein jQuery-Tag). Mit dem Klick verhindern Sie das eigentliche Ereignis (der Anker funktioniert also nie wie ein Standardanker, zB: nicht den Standort ändern) und dann scroll actions with javascript.

$('.example').on('click', function(e){ 
    e.preventDefault(); 
    const elem = this; // save it so we can use it in the animate 

    $('html, body').animate({ 
     scrollTop: $($(elem).attr('href')).offset().top 
    }, 2000); 
}); 

In meinem Beispiel gehe ich davon aus, dass Sie in der href "#example" haben, und eine passende ID. Wenn Sie komplexere Auswahlen wünschen, sollten Sie den attr('href') Teil zB zu einem data() Attribut