Wir haben einige Seiten, auf denen Ajax zum Laden von Inhalten verwendet wird, und es gibt einige Fälle, in denen wir einen Deep Link zu einer Seite erstellen müssen. Anstatt einen Link zu "Benutzer" zu haben und den Leuten zu sagen, dass sie auf "Einstellungen" klicken sollen, ist es hilfreich, Leute zu verlinken anzuweisen den Einstellungen user.aspx # können
Damit die Leute uns korrekte Links zu Abschnitten (für technischen Support usw.) zur Verfügung stellen können, habe ich es so eingerichtet, dass der Hash in der URL automatisch geändert wird, wenn auf eine Schaltfläche geklickt wird. Das einzige Problem ist natürlich, dass in diesem Fall auch die Seite zu diesem Element gescrollt wird.
Gibt es eine Möglichkeit, dies zu deaktivieren? Unten ist, wie ich das bisher mache.
$(function(){
//This emulates a click on the correct button on page load
if(document.location.hash){
$("#buttons li a").removeClass('selected');
s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
eval(s);
}
//Click a button to change the hash
$("#buttons li a").click(function(){
$("#buttons li a").removeClass('selected');
$(this).addClass('selected');
document.location.hash=$(this).attr("id")
//return false;
});
});
Ich hatte gehofft, das return false;
würde das Scrollen der Seite verhindern - aber dadurch funktioniert der Link überhaupt nicht. Das ist also erst einmal auskommentiert, damit ich navigieren kann.
Irgendwelche Ideen?
Verwenden Sie
history.replaceState
oderhistory.pushState
*, um den Hash zu ändern. Dadurch wird der Sprung zum zugehörigen Element nicht ausgelöst.Beispiel
Demo auf JSFiddle
* Wenn Sie Unterstützung für den Verlauf vorwärts und rückwärts wünschen
Verlaufsverhalten
Wenn Sie verwenden
history.pushState
und keine Seiten scrollen möchten, wenn der Benutzer die Verlaufsschaltflächen des Browsers verwendet (vorwärts / rückwärts), überprüfen Sie die experimentellescrollRestoration
Einstellung (nur Chrome 46+) .Browser-Unterstützung
quelle
replaceState
ist wahrscheinlich der bessere Weg hierher zu gehen. Der Unterschied besteht darinpushState
, dass Sie Ihrem Verlauf ein Element hinzufügen, währendreplaceState
dies nicht der Fall ist.body
, was rollt, manchmal ist es dasdocumentElement
. Sehen Sie diesen Kern von Diego PeriniIch glaube, ich habe eine ziemlich einfache Lösung gefunden. Das Problem ist, dass der Hash in der URL auch ein Element auf der Seite ist, zu der Sie einen Bildlauf durchführen. Wenn ich dem Hash nur einen Text voranstelle, verweist er jetzt nicht mehr auf ein vorhandenes Element!
Jetzt wird die URL als
page.aspx#btn_elementID
keine echte ID auf der Seite angezeigt . Ich entferne einfach "btn_" und erhalte die tatsächliche Element-IDquelle
/
logisches Zeichen voran .Ein Ausschnitt aus Ihrem Originalcode:
Ändern Sie dies in:
quelle
hash
Eigenschaft die Seite ohnehin gescrollt wird.Ich habe kürzlich ein Karussell gebaut, das
window.location.hash
den Status beibehält, und festgestellt, dass Chrome- und Webkit-Browser das Scrollen (sogar zu einem nicht sichtbaren Ziel) mit einem unangenehmen Ruck erzwingen, wenn daswindow.onhashchange
Ereignis ausgelöst wird.Sogar der Versuch, einen Handler zu registrieren, der die Propagierung stoppt:
Es wurde nichts unternommen, um das Standardverhalten des Browsers zu stoppen. Die Lösung, die ich gefunden habe, bestand
window.history.pushState
darin, den Hash zu ändern, ohne die unerwünschten Nebenwirkungen auszulösen.Sie können dann sowohl auf das normale Hashchange-Ereignis als auch auf Folgendes warten
my.hashchange
:quelle
my.hashchange
ist nur ein Beispiel EreignisnameOkay, das ist ein ziemlich altes Thema, aber ich dachte, ich würde mich einmischen, da die 'richtige' Antwort mit CSS nicht gut funktioniert.
Diese Lösung verhindert grundsätzlich, dass das Klickereignis die Seite verschiebt, sodass wir zuerst die Bildlaufposition ermitteln können. Dann fügen wir den Hash manuell hinzu und der Browser löst automatisch ein Hashchange- Ereignis aus. Wir erfassen das Hashchange-Ereignis und scrollen zurück zur richtigen Position. Ein Rückruf trennt und verhindert, dass Ihr Code eine Verzögerung verursacht, indem Ihr Hash-Hacking an einem Ort bleibt.
quelle
Ähm, ich habe eine etwas grobe, aber definitiv funktionierende Methode.
Speichern Sie einfach die aktuelle Bildlaufposition in einer temporären Variablen und setzen Sie sie nach dem Ändern des Hash zurück. :) :)
Also für das ursprüngliche Beispiel:
quelle
Ich denke nicht, dass das möglich ist. Soweit ich weiß, blättert ein Browser nur dann nicht zu einer Änderung
document.location.hash
wenn der Hash nicht auf der Seite vorhanden ist.Dieser Artikel steht nicht in direktem Zusammenhang mit Ihrer Frage, beschreibt jedoch das typische Browserverhalten beim Ändern
document.location.hash
quelle
Wenn Sie das Hashchange-Ereignis mit dem Hash-Parser verwenden, können Sie die Standardaktion für Links verhindern und location.hash ändern, indem Sie ein Zeichen hinzufügen, um einen Unterschied zur id-Eigenschaft eines Elements zu erzielen
quelle
Fügen Sie dies hier hinzu, da die relevanteren Fragen alle als Duplikate markiert wurden, die hier zeigen…
Meine Situation ist einfacher:
a[href='#something']
)e.preventDefault()
$("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
window.location = link;
Auf diese Weise erfolgt der Bildlauf, und es wird kein Sprung ausgeführt, wenn der Speicherort aktualisiert wird.
quelle
Die andere Möglichkeit besteht darin, ein Div hinzuzufügen, das oben im Ansichtsfenster ausgeblendet ist. Diesem Div wird dann die ID des Hashs zugewiesen, bevor der Hash zur URL hinzugefügt wird. Dann erhalten Sie keine Schriftrolle.
quelle
Hier ist meine Lösung für geschichtsaktivierte Registerkarten:
Und um die zuletzt ausgewählte Registerkarte anzuzeigen:
Beachten Sie die
*=
auf demfilter
Anruf. Dies ist eine jQuery-spezifische Sache, und ohne sie schlagen Ihre geschichtsaktivierten Registerkarten fehl.quelle
Diese Lösung erstellt ein div am eigentlichen scrollTop und entfernt es nach dem Ändern des Hashs:
optional, Ankerereignis beim Laden der Seite auslösen:
quelle
Ich habe eine einfachere Methode, die für mich funktioniert. Denken Sie grundsätzlich daran, was der Hash tatsächlich in HTML ist. Es ist ein Ankerlink zu einem Namensschild. Deshalb wird gescrollt ... der Browser versucht, zu einem Ankerlink zu scrollen. Also, gib es eins!
Benennen Sie Ihre Abschnittsdivs mit Klassen anstelle von IDs.
Entfernen Sie in Ihrem Verarbeitungscode die Raute und ersetzen Sie sie durch einen Punkt:
Entfernen Sie schließlich element.preventDefault oder geben Sie: false zurück und lassen Sie die Navigation zu. Das Fenster bleibt oben, der Hash wird an die URL der Adressleiste angehängt und das richtige Fenster wird geöffnet.
quelle
Ich denke, Sie müssen den Bildlauf vor dem Hash-Wechsel auf seine Position zurücksetzen.
quelle
Wenn Sie auf Ihrer Seite die ID als eine Art Ankerpunkt verwenden und Szenarien haben, in denen Benutzer #something an das Ende der URL anhängen und die Seite mithilfe Ihrer eigenen definierten Animation zu diesem #something-Abschnitt scrollen sollen Javascript-Funktion, Hashchange-Ereignis-Listener kann das nicht.
Wenn Sie einfach einen Debugger unmittelbar nach dem Hashchange-Ereignis einfügen, zum Beispiel so etwas (nun, ich verwende jquery, aber Sie verstehen es):
Sie werden feststellen, dass die Seite sofort nach dem Ändern Ihrer URL und dem Drücken der Eingabetaste an der entsprechenden Stelle stoppt. Danach wird Ihre eigene definierte Bildlauffunktion ausgelöst und es wird eine Art Bildlauf zu diesem Abschnitt durchgeführt, der aussieht sehr schlecht.
Mein Vorschlag ist:
Verwenden Sie id nicht als Ankerpunkt für den Abschnitt, zu dem Sie scrollen möchten.
Wenn Sie ID verwenden müssen, wie ich. Verwenden Sie stattdessen den Ereignis-Listener 'popstate'. Es wird nicht automatisch zu dem Abschnitt gescrollt, den Sie an die URL anhängen. Stattdessen können Sie Ihre eigene definierte Funktion innerhalb des popstate-Ereignisses aufrufen.
$(window).on('popstate', function(){myscrollfunction()});
Schließlich müssen Sie einen kleinen Trick in Ihrer eigenen definierten Bildlauffunktion ausführen:
Löschen Sie die ID Ihres Tags und setzen Sie sie zurück.
Dies sollte den Trick tun.
quelle
Fügen Sie diesen Code nur dann in jQuery ein, wenn das Dokument fertig ist
Ref: http://css-tricks.com/snippets/jquery/smooth-scrolling/
quelle