Jak wyłączyć „skok” kotwicy podczas ładowania strony?

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.hashi 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

Twoja poprawka nie działa? Nie jestem pewien, czy dobrze rozumiem pytanie - czy masz stronę demonstracyjną? Możesz spróbować:

if (location.hash) {
  setTimeout(function() {

    window.scrollTo(0, 0);
  }, 1);
}

Edycja: przetestowana i działa w przeglądarkach Firefox, IE i Chrome w systemie Windows.
Edycja 2: poruszanie się setTimeout()wewnątrz ifbloku, props @vsync.

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.

// store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on('load', function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});

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.

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)

    if (location.hash) {               // do the test straight away
        window.scrollTo(0, 0);         // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0);     // run it a bit later also for browser compatibility
        }, 1);
    }

1. 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.

2. 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).

3. 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:

    <script>
    $(function () {         
        if (location.hash != "") {
            selectPersonalTab(location.hash);
        }
        else {
            selectPersonalTab("#cards");
        }
    });

    function selectPersonalTab(hash) {
        $("#personal li").removeClass("active");
        $("a[href$=" + hash + "]").closest("li").addClass("active");
        $("#personaldata > div").hide();
        location.hash = hash;
        $(hash).show();
    }

    $("#personal li a").click(function (e) {
        var t = e.target;
        if (t.href.indexOf("#") != -1) {
            var hash = t.href.substr(t.href.indexOf("#"));
            selectPersonalTab(hash);
            return false;
        }
    });
</script>

Ż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.

/**
 * Prevent automatic scrolling of page to anchor by browser after loading of page.
 * Do not call this function in $(...) or $(window).on('load', ...),
 * it should be called earlier, as soon as possible.
 */
function preventAnchorScroll() {
    var scrollToTop = function () {
        $(window).scrollTop(0);
    };
    if (window.location.hash) {
        // handler is executed at most once
        $(window).one('scroll', scrollToTop);
    }

    // make sure to release scroll 1 second after document readiness
    // to avoid negative UX
    $(function () {
        setTimeout(
            function () {
                $(window).off('scroll', scrollToTop);
            },
            1000
        );
    });
}

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):

.elementsWithAnchorIds::before {
   content: "";
   display: block;
   height: 9999px;
   margin-top: -9999px; //higher thin page height
}

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

 window.scrollTo(0, 0);

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

<a href="/page/with/tabs#tab2">Some info found in tab2 on tabs page</a>

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:

<div id="tab2-noScroll">tab2 content</div>

Następnie możesz dołączyć "-noScroll"do location.hashw javascript:

<script type="text/javascript">
    $(function() {

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;


     tabContent.not(hash + '-noScroll').hide();                           
        if(hash=="") {       //^ here
      $('#tab1-noScroll').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") + '-noScroll'; 
                                                               //^ and here

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

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:

$(document).on('click','yourtarget',function(){
        var st=window.pageYOffset;
        $('html, body').animate({
                'scrollTop' : st
            });
});

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.

    $( ".tabs" ).tabs();
    $( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) { 
        window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
        return false;
    });

    var selectedTabHash = window.location.hash.replace(/tab_/,"");
    var index = $( ".tabs li a" ).index($(".tabs li a[href='"+selectedTabHash+"']"));
    $( ".tabs" ).not(".noHash").tabs('select', index);

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.

To zadziała z bootstrapem v3

$(document).ready(function() {
  if ($('.nav-tabs').length) {
    var hash = window.location.hash;
    var hashEl = $('ul.nav a[href="' + hash + '"]');
    hash && hashEl.tab('show');

    $('.nav-tabs a').click(function(e) {
      e.preventDefault();
      $(this).tab('show');
      window.location.hash = this.hash;
    });

    // Change tab on hashchange
    window.addEventListener('hashchange', function() {
      var changedHash = window.location.hash;
      changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
    }, false);
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
</div>

Inne podejście

Spróbuj sprawdzić, czy strona została przewinięta i dopiero wtedy zresetuj pozycję:

var scrolled = false;

$(window).scroll(function(){
  scrolled = true;
});

if ( window.location.hash && scrolled ) {
  $(window).scrollTop( 0 );
}

Heres a demo

Nie odniosłem dużego sukcesu z powyższymi setTimeoutmetodami w przeglądarce Firefox.

Zamiast setTimeout użyłem funkcji onload:

window.onload = function () {
    if (location.hash) {
        window.scrollTo(0, 0);
    }
};

Niestety nadal jest to bardzo glitchy.

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.

.scroll-target{position:fixed;top:0;left:0;}

Następnie użyj jquery, aby przewinąć do rodzica docelowej kotwicy lub rodzeństwa (może to być pusty znacznik em)

<a class="scroll-target" name="section3"></a><em>&nbsp</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ł)

setTimeout(function() {
    if (window.location.hash) {               
        var hash = window.location.hash.substr(1);   
        var scrollPos = $('.scroll-target[name="'+hash+'"]').siblings('em').offset().top; 
        $("html, body").animate({ scrollTop: scrollPos }, 1000);    
    }
}, 1);

Będziesz także chciał zapobiec domyślnym kliknięciom kotwicy na stronie, a następnie przewinąć do ich celów

<a class="scroll-to" href="#section3">section three</a>

i jquery

$('a.scroll-to').click(function(){
    var target = $(this).attr('href').substr(1);
    var scrollPos = $('.scroll-target[name="'+target+'"]').siblings('em').offset().top; 
    $("html, body").animate({ scrollTop: scrollPos }, 1000);
    return false;
});

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

Spróbuj tego, aby zapobiec wszelkiego rodzaju przewijaniu w pionie po zmianie hash (wewnątrz twojego modułu obsługi zdarzeń):

var sct = document.body.scrollTop;
document.location.hash = '#next'; // or other manipulation
document.body.scrollTop = sct;

(przerysowanie przeglądarki)

Rozwiązałem mój problem w ten sposób:

// navbar height 
var navHeigth = $('nav.navbar').height();    

// Scroll to anchor function
var scrollToAnchor = function(hash) {
  // If got a hash
  if (hash) {
    // Scroll to the top (prevention for Chrome)
    window.scrollTo(0, 0);
    // Anchor element
    var term = $(hash);

    // If element with hash id is defined
    if (term) {

      // Get top offset, including header height
      var scrollto = term.offset().top - navHeigth;

      // Capture id value
      var id = term.attr('id');
      // Capture name value
      var name = term.attr('name');

      // Remove attributes for FF scroll prevention
      term.removeAttr('id').removeAttr('name');
      // Scroll to element
      $('html, body').animate({scrollTop:scrollto}, 0);

      // Returning id and name after .5sec for the next scroll
      setTimeout(function() {
        term.attr('id', id).attr('name', name);
      }, 500);
    }
  }
};

// if we are opening the page by url
if (location.hash) {
  scrollToAnchor(location.hash);
}

// preventing default click on links with an anchor
$('a[href*="#"]').click(function(e) {
  e.preventDefault();
  // hash value
  var hash = this.href.substr(this.href.indexOf("#"));
  scrollToAnchor(hash);
});`