Ich habe auf meiner Website ein Schiebefeld eingerichtet.
Als die Animation beendet war, stellte ich den Hash so ein
function() {
window.location.hash = id;
}
(Dies ist ein Rückruf, und der id
wird früher zugewiesen).
Dies funktioniert gut, damit der Benutzer das Bedienfeld mit einem Lesezeichen versehen kann und auch die Nicht-JavaScript-Version funktioniert.
Wenn ich jedoch den Hash aktualisiere, springt der Browser zum Speicherort. Ich denke, das ist erwartetes Verhalten.
Meine Frage ist: Wie kann ich das verhindern? Das heißt , wie kann ich den Hash - Fenster ändern, aber nicht den Browser blättern zu dem Element, wenn der Hash existiert? So event.preventDefault()
etwas?
Ich verwende jQuery 1.4 und das scrollTo-Plugin .
Danke vielmals!
Aktualisieren
Hier ist der Code, der das Panel ändert.
$('#something a').click(function(event) {
event.preventDefault();
var link = $(this);
var id = link[0].hash;
$('#slider').scrollTo(id, 800, {
onAfter: function() {
link.parents('li').siblings().removeClass('active');
link.parent().addClass('active');
window.location.hash = id;
}
});
});
javascript
jquery
hash
scrollto
Alex
quelle
quelle
event.preventDefault()
:)Antworten:
Es gibt eine Problemumgehung, indem Sie die Verlaufs-API in modernen Browsern verwenden und auf alte zurückgreifen:
Der Kredit geht an Lea Verou
quelle
history.replaceState
(was für Hash-Änderungen sinnvoller sein könnte), um die Notwendigkeit einespopstate
Ereignis-Listeners zu vermeiden .hashchange
Ereignis nicht auslöst . Daran musste ich arbeiten.hashchange
Ereignis auslösenDas Problem ist, dass Sie die Datei window.location.hash auf das ID-Attribut eines Elements setzen. Es ist das erwartete Verhalten des Browsers, zu diesem Element zu springen, unabhängig davon, ob Sie "verhindern" (nicht).
Eine Möglichkeit, dies zu umgehen, besteht darin, dem Hash einen beliebigen Wert wie folgt voranzustellen:
Anschließend müssen Sie beim Laden der Seite nur noch nach dem vorangestellten Hash suchen. Als zusätzlichen Bonus können Sie sogar reibungslos dorthin scrollen, da Sie jetzt die Kontrolle über den Hash-Wert haben ...
Wenn Sie dies benötigen, um jederzeit zu funktionieren (und nicht nur beim ersten Laden der Seite), können Sie eine Funktion verwenden, um Änderungen am Hash-Wert zu überwachen und sofort zum richtigen Element zu springen:
quelle
Günstige und böse Lösung .. Verwenden Sie die hässliche #! Stil.
So stellen Sie es ein:
Um es zu lesen:
Da es nicht mit dem Anker oder der ID auf der Seite übereinstimmt, springt es nicht.
quelle
window.location.hash = '#/' + id;
Sie den Hash mit: setzen und dann durch : ersetzen,window.location.hash.replace(/^#\//, '#');
wird die URL ein wenigprojects/#/tab1
Warum erhalten Sie nicht die aktuelle Bildlaufposition, fügen sie in eine Variable ein, weisen dann den Hash zu und setzen den Bildlauf an die Position zurück, an der er war:
das sollte funktionieren
quelle
Ich habe eine Kombination aus Attila Fulop (Lea Verou) -Lösung für moderne Browser und Gavin Brock-Lösung für alte Browser wie folgt verwendet:
Wie von Gavin Brock beobachtet, müssen Sie die Zeichenfolge (die in diesem Fall das "!" Haben kann oder nicht) wie folgt behandeln, um die ID zurück zu erfassen:
Vorher habe ich eine ähnliche Lösung wie die von user706270 vorgeschlagene versucht, die jedoch mit Internet Explorer nicht gut funktioniert hat: Da die Javascript-Engine nicht sehr schnell ist, können Sie feststellen, dass der Bildlauf zunimmt und abnimmt, was zu einem unangenehmen visuellen Effekt führt.
quelle
Diese Lösung hat bei mir funktioniert.
Das Problem bei der Einstellung
location.hash
ist, dass die Seite zu dieser ID springt, wenn sie auf der Seite gefunden wird.Das Problem dabei
window.history.pushState
ist, dass für jede Registerkarte, auf die der Benutzer klickt, ein Eintrag zum Verlauf hinzugefügt wird. Wenn der Benutzer dann auf dieback
Schaltfläche klickt , wechselt er zur vorherigen Registerkarte. (Dies kann oder kann nicht sein, was Sie wollen. Es war nicht das, was ich wollte).Für mich
replaceState
war die bessere Option, da sie nur den aktuellen Verlauf ersetzt. Wenn der Benutzer auf dieback
Schaltfläche klickt , wechselt er zur vorherigen Seite.Überprüfen Sie die Verlaufs-API-Dokumente auf MDN.
quelle
Ich bin nicht sicher, ob Sie das ursprüngliche Element ändern können, aber wie wäre es, wenn Sie von der Verwendung der ID attr zu etwas anderem wie der Daten-ID wechseln? Dann lesen Sie einfach den Wert der Daten-ID für Ihren Hash-Wert und es wird nicht springen.
quelle
Diese Lösung hat bei mir funktioniert
Und mein vollständiger JS-Code ist
quelle
Bei der Verwendung des Laravel-Frameworks hatte ich einige Probleme mit der Verwendung einer route-> back () -Funktion, da dadurch mein Hash gelöscht wurde. Um meinen Hash zu behalten, habe ich eine einfache Funktion erstellt:
und ich stelle es in meiner anderen JS-Funktion so ein:
Sie können Ihre lokalen Speicherwerte beliebig benennen. meins benannt
hash
.Wenn der Hash auf PAGE1 gesetzt ist und Sie dann zu PAGE2 navigieren; Der Hash wird auf SEITE1 neu erstellt, wenn Sie auf SEITE2 auf Zurück klicken.
quelle