Ich denke, das ist möglicherweise nicht möglich, werde versuchen, es so gut wie möglich zu erklären. Ich habe eine Seite mit Registerkarten (jquery powered), die wie folgt gesteuert werden:
Ich verwende diesen Code, wie er von einem anderen Benutzer aus einer vorherigen Frage bereitgestellt wurde.
<script type="text/javascript">
$(function() {
$('html, body').animate({scrollTop:0}); // this is my "fix"
var tabContent = $(".tab_content");
var tabs = $("#menu li");
var hash = window.location.hash;
tabContent.not(hash).hide();
if(hash=="") {
$('#tab1').fadeIn();
}
tabs.find('[href=' + hash + ']').parent().addClass('active');
tabs.click(function() {
$(this).addClass('active').siblings().removeClass('active');
tabContent.hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
Dieser Code funktioniert hervorragend, wenn ich die Seite "Registerkarten" direkt besuche.
Ich muss jedoch auf einzelne Registerkarten von anderen Seiten verlinken. Dazu erhält der Code window.location.hash
die entsprechende Registerkarte.
Die Seite "springt" nicht zum Anker, weil "return false".
Dieses Ereignis wird jedoch nur bei einem Klickereignis ausgelöst. Wenn ich meine "Tabs" von einer anderen Seite aus besuche, wird der "Sprung" -Effekt ausgelöst. Um dem entgegenzuwirken, scrolle ich automatisch zum Anfang der Seite, aber ich möchte lieber, dass dies nicht passiert.
Gibt es eine Möglichkeit, "return false" beim Laden der Seite zu simulieren, um zu verhindern, dass der "Sprung" des Ankers auftritt?
hoffe das ist klar genug.
Vielen Dank
setTimeout
und es hat nicht immer funktioniert. Sie brauchen es wahrscheinlich nicht, wenn es$(function() {
sowieso in jQuery ist. Sie brauchen das nicht wirklichlocation.hash
, aber es ist schön, es zu belassen, damit Browser möglicherweise nichts tun müssen. Erinnert Sie auch daran, wofür das scrollTo ist!if
sollte draußen sein, nicht drinnen. Außerdem beträgt das Minimum für das Intervall ungefähr 10, sodass 0 oder 1 gleich sind. Wie 10. je nach Browser.Siehe meine Antwort hier: Stackoverflow-Antwort
Der Trick besteht darin, das Hashtag so schnell wie möglich zu entfernen und seinen Wert für den eigenen Gebrauch zu speichern:
Es ist wichtig, dass Sie diesen Teil des Codes nicht in die Funktionen $ () oder $ (Fenster) .load () einfügen, da dies zu spät wäre und der Browser bereits zum Tag gewechselt ist.
quelle
Es gibt andere Möglichkeiten, um zu verfolgen, auf welcher Registerkarte Sie sich befinden. Setzen Sie möglicherweise ein Cookie oder einen Wert in ein verstecktes Feld usw. usw.
Ich würde sagen, wenn Sie nicht möchten, dass die Seite beim Laden springt, ist es besser, eine dieser anderen Optionen als den Hash zu verwenden, da der Hauptgrund für die Verwendung des Hash gegenüber diesen darin besteht, genau das zuzulassen, was Sie möchten wollen blockieren.
Ein weiterer Punkt: Die Seite springt nicht, wenn Ihre Hash-Links nicht mit den Namen der Tags im Dokument übereinstimmen. Wenn Sie den Hash also weiterhin verwenden möchten, können Sie den Inhalt so bearbeiten, dass die Tags unterschiedlich benannt werden. Wenn Sie ein konsistentes Präfix verwenden, können Sie weiterhin Javascript verwenden, um zwischen diesen zu wechseln.
Hoffentlich hilft das.
quelle
Ich habe die Lösung von dave1010 verwendet, aber es war etwas nervös, als ich sie in die Funktion $ (). Ready einfügte. Also habe ich folgendes gemacht: (nicht innerhalb des $ (). Fertig)
quelle
Der Browser springt zu,
<element id="abc" />
wenn die Adresse einen http://site.com/#abc-Hash enthält und das Element mit id = "abc" sichtbar ist. Sie sollten das Element also standardmäßig ausblenden :<element id="anchor" style="display: none" />
. Wenn auf der Seite kein sichtbares Element mit id = Hash vorhanden ist, würde der Browser nicht springen.Erstellen Sie ein Skript, das den Hash in der URL überprüft und dann das prrpopriate-Element findet und anzeigt (das standardmäßig ausgeblendet ist).
Deaktivieren Sie das Standardverhalten "Hash-ähnlicher Link", indem Sie ein Onclick-Ereignis an einen Link binden und
return false;
als Ergebnis eines Onclick-Ereignisses angeben .Als ich Tabs implementiert habe, habe ich so etwas geschrieben:
quelle
Keine der Antworten funktioniert für mich nicht gut genug. Ich sehe, wie die Seite vor Anker springt und dann nach oben geht, um einige Lösungen zu finden. Einige Antworten funktionieren überhaupt nicht. Möglicherweise haben sich die Dinge jahrelang geändert. Hoffe, meine Funktion wird jemandem helfen.
quelle
$(document).ready(function () { preventAnchorScroll(); });
Rufen Sie einfach die Funktion ganz am Anfang Ihres JavaScript auf. Ich habe es jetzt getestet und funktioniert für mich in Chrome, Firefox und Opera.Dirty CSS behebt nur, dass jedes Mal, wenn der Anker verwendet wird, nach oben gescrollt wird (nicht nützlich, wenn Sie weiterhin Anker für Scroll-Sprünge verwenden möchten, sehr nützlich zum Deeplinking):
quelle
Obwohl die akzeptierte Antwort gut funktioniert, habe ich manchmal festgestellt, dass die Bildlaufleiste, insbesondere auf Seiten mit großen Bildern, wild herumspringt
Was für den Benutzer ziemlich ablenkend sein kann.
Die Lösung, für die ich mich am Ende entschieden habe, ist eigentlich ziemlich einfach. Dabei wird auf dem Ziel eine andere ID verwendet als in
location.hash
Z.B:
Hier ist der Link auf einer anderen Seite
Also natürlich, wenn es ein Element mit der ID von gibt
tab2
auf der Registerkarte springt das Fenster beim Laden .Sie können also etwas an die ID anhängen, um dies zu verhindern:
Und dann können Sie hängen Sie
"-noScroll"
anlocation.hash
der javascript:quelle
In meinem Fall habe ich wegen der Verwendung des Ankerlinks für das CSS-Popup Folgendes verwendet:
Speichern Sie einfach die Seite YOffset als erstes beim Klicken und setzen Sie dann das ScrollTop auf Folgendes:
quelle
Ich glaube, ich habe einen Weg für UI-Registerkarten gefunden, ohne die Funktionalität zu wiederholen. Bisher habe ich keine Probleme gefunden.
Alles innerhalb einer fertigen Veranstaltung. Es stellt "tab_" für den Hash voran, funktioniert jedoch sowohl beim Klicken als auch beim Laden der Seite mit dem Hash.
quelle
Dies funktioniert mit Bootstrap v3
quelle
Ein anderer Ansatz
Überprüfen Sie, ob die Seite gescrollt wurde, und setzen Sie erst dann die Position zurück:
Heres a demo
quelle
Ich hatte mit dem oben genannten nicht viel Erfolg
setTimeout
Methoden in Firefox .Anstelle eines setTimeout habe ich eine Onload-Funktion verwendet:
Es ist leider immer noch sehr unangenehm.
quelle
Ich habe mit diesen Lösungen keinen konsequenten Erfolg gehabt.
Anscheinend aufgrund der Tatsache, dass der Sprung vor Javascript => Referenz erfolgt ( http://forum.jquery.com/topic/preventing-anchor-jump )
Meine Lösung besteht darin, alle Anker mit CSS standardmäßig oben zu positionieren.
Verwenden Sie dann jquery, um zum übergeordneten Element des Zielankers oder zu einem Geschwister (möglicherweise einem leeren em-Tag) zu scrollen.
jQuery-Beispiel für das Scrollen, wenn eine URL mit Hash eingegeben wird
(Seite darf nicht bereits in Fenster / Tab geladen sein, dies deckt Links von anderen / externen Quellen ab)
Außerdem möchten Sie die Standardeinstellung für Ankerklicks auf der Seite verhindern und dann zu ihren Zielen scrollen
und jquery
Das Gute an dieser Methode ist, dass die Ankertag-Ziele strukturell neben dem relevanten Inhalt bleiben, obwohl ihre CSS-Position oben liegt.
Dies sollte bedeuten, dass Suchmaschinen-Crawler kein Problem haben.
Prost, ich hoffe das hilft
Gray
quelle
Versuchen Sie dies, um zu verhindern, dass der Client beim Hash-Ändern (in Ihrem Event-Handler) vertikal scrollt:
(Browser neu zeichnen)
quelle
Mein Problem wurde dadurch gelöst:
quelle