Myślę, że może to nie być możliwe, postaram się wyjaśnić najlepiej, jak potrafię. Mam stronę zawierającą zakładki (obsługiwane przez jQuery), kontrolowane przez:
Używam tego kodu podanego przez innego użytkownika z poprzedniego pytania.
<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>
ten kod działa świetnie, gdy bezpośrednio odwiedzam stronę „karty”.
jednak muszę linkować do poszczególnych zakładek z innych stron - aby to zrobić, kod pobiera window.location.hash
i wyświetla odpowiednią zakładkę.
strona nie „przeskakuje” do kotwicy z powodu „return false”.
to zdarzenie jest jednak wyzwalane tylko w przypadku kliknięcia. dlatego też, jeśli odwiedzę moje „zakładki” z dowolnej innej strony, wywoływany jest efekt „skoku”. Aby temu przeciwdziałać, automatycznie przewijam na górę strony, ale wolałbym, żeby tak się nie stało.
czy istnieje sposób, aby zasymulować „return false” podczas ładowania strony, zapobiegając wystąpieniu „skoku” kotwicy.
mam nadzieję, że to jest wystarczająco jasne.
dzięki
setTimeout
i nie zawsze działało. Prawdopodobnie nie potrzebujesz tego, jeśli i tak jest w jQuery$(function() {
. Tak naprawdę nie potrzebujeszlocation.hash
, ale fajnie jest zostawić go w tym miejscu, więc przeglądarki mogą nie musieć nic robić. Przypomina również, do czego służy scrollTo!if
Powinny być na zewnątrz, a nie wewnątrz. również minimalny interwał wynosi około 10, więc 0 lub 1 to to samo… jako 10. w zależności od przeglądarki.Zobacz moją odpowiedź tutaj: Odpowiedź Stackoverflow
Sztuczka polega na tym, aby jak najszybciej usunąć hashtag i zachować jego wartość do własnego użytku:
Ważne jest, aby nie umieszczać tej części kodu w funkcjach $ () lub $ (window) .load (), ponieważ byłoby za późno, a przeglądarka została już przeniesiona do znacznika.
źródło
Istnieją inne sposoby śledzenia, na której karcie się znajdujesz; być może ustawienie pliku cookie lub wartości w ukrytym polu itp.
Powiedziałbym, że jeśli nie chcesz, aby strona podskakiwała podczas ładowania, lepiej byłoby użyć jednej z tych innych opcji zamiast mieszania, ponieważ głównym powodem używania skrótu zamiast nich jest zezwolenie na dokładnie to, co chcesz chcą się zablokować.
Kolejna kwestia - strona nie będzie przeskakiwać, jeśli twoje linki z skrótem nie będą pasować do nazw tagów w dokumencie, więc być może jeśli chcesz nadal używać skrótu, możesz manipulować zawartością, aby tagi były nazwane inaczej. Jeśli użyjesz spójnego prefiksu, nadal będziesz mógł używać Javascript do przechodzenia między nimi.
Mam nadzieję, że to pomoże.
źródło
Użyłem rozwiązania dave1010, ale było trochę niepewne, kiedy wstawiłem je do funkcji $ (). Ready. Więc zrobiłem to: (nie wewnątrz $ (). Gotowe)
źródło
Przeglądarka
<element id="abc" />
przechodzi do, jeśli adres zawiera hash http://site.com/#abc, a element o identyfikatorze id = "abc" jest widoczny. Więc, po prostu należy ukryć element domyślnie:<element id="anchor" style="display: none" />
. Jeśli na stronie nie ma widocznego elementu z id = hash, przeglądarka nie przeskoczy.Utwórz skrypt, który sprawdza hash w adresie URL, a następnie znajduje i wyświetla odpowiedni element (który jest domyślnie ukryty).
Wyłącz domyślne zachowanie „linku podobnego do skrótu”, wiążąc zdarzenie onclick z łączem i określając
return false;
jako wynik zdarzenia onclick.Kiedy zaimplementowałem zakładki, napisałem coś takiego:
źródło
Żadna z odpowiedzi nie działa dla mnie wystarczająco dobrze, widzę, że strona przeskakuje do zakotwiczenia, a następnie do góry w przypadku niektórych rozwiązań, niektóre odpowiedzi w ogóle nie działają, może się to zmienić przez lata. Mam nadzieję, że moja funkcja komuś pomoże.
źródło
$(document).ready(function () { preventAnchorScroll(); });
po prostu wywołaj funkcję na samym początku JavaScript. Przetestowałem to teraz, działa dla mnie w Chrome, Firefox i Opera.brudny CSS naprawia tylko pozostanie przewijany za każdym razem, gdy kotwica jest używana (nie przydatne, jeśli nadal chcesz używać kotwic do skoków przewijania, bardzo przydatne do głębokiego linkowania):
źródło
Chociaż zaakceptowana odpowiedź działa dobrze, zauważyłem, że czasami, szczególnie na stronach zawierających duże obrazy, pasek przewijania będzie szaleńczo przeskakiwać, używając
Co może być dość rozpraszające dla użytkownika.
Rozwiązanie, które ostatecznie wybrałem, jest w rzeczywistości dość proste i polega na użyciu innego identyfikatora celu niż ten używany w
location.hash
Na przykład:
Oto link na innej stronie
Więc oczywiście, jeśli istnieje element o identyfikatorze
tab2
na stronie z zakładkami okno przeskoczy do niego po załadowaniu.Możesz więc dołączyć coś do identyfikatora, aby temu zapobiec:
Następnie możesz dołączyć
"-noScroll"
dolocation.hash
w javascript:źródło
W moim przypadku ze względu na użycie linku kotwicy do wyskakującego okienka CSS użyłem tego sposobu:
Po prostu zapisz stronę YOffset po kliknięciu, a następnie ustaw ScrollTop na to:
źródło
Myślę, że znalazłem sposób na karty interfejsu użytkownika bez ponownego modyfikowania funkcjonalności. Jak dotąd nie znalazłem żadnych problemów.
Wszystko w ramach gotowego wydarzenia. Dodaje „tab_” jako hash, ale działa zarówno po kliknięciu, jak i po załadowaniu strony z hashem.
źródło
To zadziała z bootstrapem v3
źródło
Inne podejście
Spróbuj sprawdzić, czy strona została przewinięta i dopiero wtedy zresetuj pozycję:
Heres a demo
źródło
Nie odniosłem dużego sukcesu z powyższymi
setTimeout
metodami w przeglądarce Firefox.Zamiast setTimeout użyłem funkcji onload:
Niestety nadal jest to bardzo glitchy.
źródło
Nie odniosłem stałego sukcesu z tymi rozwiązaniami.
Najwyraźniej ze względu na fakt, że skok następuje przed Javascript => odniesieniem ( http://forum.jquery.com/topic/preventing-anchor-jump )
Moim rozwiązaniem jest domyślne umieszczenie wszystkich kotwic na górze za pomocą CSS.
Następnie użyj jquery, aby przewinąć do rodzica docelowej kotwicy lub rodzeństwa (może to być pusty znacznik em)
Przykład jquery do przewijania po wprowadzeniu adresu URL z hashem
(strona nie może być już załadowana w oknie / karcie, obejmuje to linki z innych / zewnętrznych źródeł)
Będziesz także chciał zapobiec domyślnym kliknięciom kotwicy na stronie, a następnie przewinąć do ich celów
i jquery
Zaletą tej metody jest to, że docelowe znaczniki kotwicy pozostają strukturalnie obok odpowiedniej treści, chociaż ich pozycja CSS znajduje się na górze.
Powinno to oznaczać, że roboty wyszukiwarek nie będą miały problemu.
Na zdrowie, mam nadzieję, że to pomoże
Grayowi
źródło
Spróbuj tego, aby zapobiec wszelkiego rodzaju przewijaniu w pionie po zmianie hash (wewnątrz twojego modułu obsługi zdarzeń):
(przerysowanie przeglądarki)
źródło
Rozwiązałem mój problem w ten sposób:
źródło