Bagaimana cara menonaktifkan anchor "jump" saat memuat halaman?

Saya pikir ini mungkin tidak mungkin, akan mencoba dan menjelaskan sebaik mungkin. Saya memiliki halaman yang berisi tab (bertenaga jquery), dikontrol oleh yang berikut:

Saya menggunakan kode ini, seperti yang diberikan oleh pengguna lain dari pertanyaan sebelumnya.

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

kode ini berfungsi dengan baik saat saya mengunjungi halaman "tab" secara langsung.

namun, saya perlu menautkan ke tab individual dari halaman lain - jadi untuk melakukan ini, kode mendapatkan window.location.hashlalu menampilkan tab yang sesuai.

halaman tidak "melompat" ke jangkar karena "return false".

Namun, peristiwa ini hanya dipicu pada peristiwa klik. karenanya, jika saya mengunjungi "tab" saya dari halaman lain, efek "lompat" dipicu. Untuk mengatasi ini, saya secara otomatis menggulir ke bagian atas halaman, tetapi saya lebih suka ini tidak terjadi.

apakah ada cara untuk mensimulasikan "return false" saat halaman dimuat, mencegah jangkar "melompat" terjadi.

harap ini cukup jelas.

Terima kasih

Apakah perbaikan Anda tidak berhasil? Saya tidak yakin apakah saya memahami pertanyaan dengan benar - apakah Anda memiliki halaman demo? Kamu bisa mencoba:

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

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

Edit: diuji dan berfungsi di Firefox, IE & Chrome di Windows.
Edit 2: pindah ke setTimeout()dalam ifblok, props @vsync.

Lihat jawaban saya di sini: Jawaban Stackoverflow

Triknya adalah dengan segera menghapus hashtag ASAP dan menyimpan nilainya untuk Anda gunakan sendiri:

Penting bagi Anda untuk tidak meletakkan bagian kode itu dalam fungsi $ () atau $ (window) .load () karena akan terlambat dan browser sudah pindah ke tag.

// 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 () {});
    }
});

Ada cara lain untuk melacak tab yang Anda buka; mungkin menyetel cookie, atau nilai di bidang tersembunyi, dll.

Saya akan mengatakan bahwa jika Anda tidak ingin halaman melompat saat dimuat, Anda akan lebih baik menggunakan salah satu dari opsi lain ini daripada hash, karena alasan utama menggunakan hash dalam preferensi untuk mereka adalah untuk mengizinkan apa yang Anda inginkan. ingin memblokir.

Hal lain - halaman tidak akan melompat jika tautan hash Anda tidak cocok dengan nama tag di dokumen, jadi mungkin jika Anda ingin tetap menggunakan hash, Anda dapat memanipulasi konten sehingga tag diberi nama berbeda. Jika Anda menggunakan awalan yang konsisten, Anda masih dapat menggunakan Javascript untuk beralih di antaranya.

Semoga membantu.

Saya menggunakan solusi dave1010, tetapi agak gelisah ketika saya memasukkannya ke dalam fungsi siap $ (). Jadi saya melakukan ini: (bukan di dalam $ (). Ready)

    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. Browser melompat ke <element id="abc" />jika ada hash http://site.com/#abc di alamat dan elemen dengan id = "abc" terlihat. Jadi, Anda hanya harus menyembunyikan elemen secara default: <element id="anchor" style="display: none" />. Jika tidak ada elemen yang terlihat dengan id = hash di halaman, browser tidak akan melompat.

2. Buat skrip yang memeriksa hash di url, lalu temukan dan tampilkan elemen prrpopriate (yang disembunyikan secara default).

3. Nonaktifkan perilaku default "tautan seperti hash" dengan mengikat kejadian onclick ke tautan dan tentukan return false;sebagai hasil dari kejadian onclick.

Ketika saya menerapkan tab, saya menulis sesuatu seperti itu:

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

Tidak ada jawaban yang tidak bekerja cukup baik untuk saya, saya melihat halaman melompat ke jangkar dan kemudian ke atas untuk beberapa solusi, beberapa jawaban tidak berfungsi sama sekali, mungkin ada hal yang berubah selama bertahun-tahun. Semoga fungsi saya akan membantu seseorang.

/**
 * 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
        );
    });
}

CSS kotor hanya memperbaiki untuk tetap menggulir ke atas setiap kali jangkar digunakan (tidak berguna jika Anda masih ingin menggunakan jangkar untuk gulir-lompat, sangat berguna untuk tautan dalam):

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

Meskipun jawaban yang diterima berfungsi dengan baik, saya menemukan bahwa kadang-kadang, terutama pada halaman yang berisi gambar besar yang bilah gulir akan melompat dengan liar menggunakan

 window.scrollTo(0, 0);

Yang bisa sangat mengganggu pengguna.

Solusi yang saya tetapkan pada akhirnya sebenarnya cukup sederhana, dan itu menggunakan ID yang berbeda pada target dengan yang digunakan di location.hash

Misalnya:

Ini adalah tautan di beberapa halaman lain

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

Jadi tentu saja jika ada elemen dengan ID tab2pada halaman tab jendela akan melompat ke sana saat dimuat.

Jadi, Anda dapat menambahkan sesuatu ke ID untuk mencegahnya:

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

Dan kemudian Anda dapat menambahkan "-noScroll"ke location.hashdalam 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>

Dalam kasus saya karena menggunakan tautan jangkar untuk sembulan CSS, saya telah menggunakan cara ini:

Simpan saja pageYOffset hal pertama saat klik dan kemudian atur ScrollTop ke sana:

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

Saya rasa saya telah menemukan cara untuk Tab UI tanpa mengulangi fungsinya. Sejauh ini saya belum menemukan masalah.

    $( ".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);

Semua dalam acara yang siap. Ini menambahkan "tab_" untuk hash tetapi berfungsi baik saat diklik dan halaman dimuat dengan hash.

Ini akan bekerja dengan bootstrap 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>

Pendekatan lain

Coba periksa apakah halaman telah digulir dan baru kemudian atur ulang posisi:

var scrolled = false;

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

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

Heres a demo

Saya tidak terlalu berhasil dengan setTimeoutmetode di atas di Firefox.

Alih-alih setTimeout, saya telah menggunakan fungsi onload:

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

Sayangnya masih sangat glitchy.

Saya belum berhasil secara konsisten dengan solusi ini.

Rupanya karena fakta bahwa lompatan terjadi sebelum Javascript => referensi ( http://forum.jquery.com/topic/preventing-anchor-jump )

Solusi saya adalah memposisikan semua jangkar di atas secara default dengan CSS.

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

Kemudian gunakan jquery untuk menggulir ke induk dari jangkar target, atau saudara kandung (mungkin tag em kosong)

<a class="scroll-target" name="section3"></a><em>&nbsp</em>

Contoh jquery untuk scrolling ketika URL dimasukkan dengan hash
(halaman tidak boleh dimuat di window / tab, ini mencakup link dari sumber lain / luar)

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

Anda juga ingin mencegah default untuk klik jangkar saat berada di halaman dan kemudian menggulir ke targetnya

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

dan 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;
});

Hal yang baik tentang metode ini adalah target tag anchor, tetap secara struktural di samping konten yang relevan, meskipun posisi CSS mereka ada di atas.

Ini berarti crawler mesin pencari tidak akan mengalami masalah.

Cheers, saya harap ini membantu
Gray

Coba ini untuk mencegah klien dari segala jenis pengguliran vertikal di hashchanged (di dalam event handler Anda):

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

(gambar ulang browser)

Memecahkan masalah saya dengan melakukan ini:

// 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);
});`