ป้องกันการเลื่อนเบราว์เซอร์อัตโนมัติเมื่อรีเฟรช

หากคุณไปที่หน้า a แล้วเลื่อนไปรอบ ๆ จากนั้นรีเฟรชหน้านั้นจะรีเฟรชตรงจุดที่คุณทิ้งไว้ วิธีนี้ดีมาก แต่ก็เกิดขึ้นในหน้าที่มีตำแหน่งจุดยึดใน url เช่นกัน ตัวอย่างเช่นหากคุณคลิกลิงก์http://example.com/post/244#comment5และรีเฟรชหน้าหลังจากมองไปรอบ ๆ คุณจะไม่อยู่ที่จุดยึดและหน้าเว็บจะกระโดดไปมา มีวิธีใดในการป้องกันปัญหานี้ด้วยจาวาสคริปต์หรือไม่? ดังนั้นไม่ว่าคุณจะนำทางไปยังจุดยึดใดเสมอ

ไม่แนะนำวิธีแก้ปัญหานี้อีกต่อไปเนื่องจากการเปลี่ยนแปลงพฤติกรรมของเบราว์เซอร์ ดูคำตอบอื่น ๆ

โดยทั่วไปหากมีการใช้จุดยึดเราจะเชื่อมโยงกับเหตุการณ์เลื่อนของหน้าต่าง แนวคิดที่ว่าเหตุการณ์เลื่อนแรกต้องเป็นของการเปลี่ยนตำแหน่งอัตโนมัติที่ทำโดยเบราว์เซอร์ เมื่อสิ่งนี้เกิดขึ้นเราจะทำการเปลี่ยนตำแหน่งของเราเองแล้วลบเหตุการณ์ที่ถูกผูกไว้ สิ่งนี้จะป้องกันไม่ให้การเลื่อนหน้าต่อมาจากการทำงานของระบบ

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

บน Chrome แม้ว่าคุณจะบังคับให้ scrollTop เป็น 0 มันจะกระโดดหลังจากเหตุการณ์เลื่อนครั้งแรก

คุณควรผูกเลื่อนกับสิ่งนี้:

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

ดังนั้นเบราว์เซอร์จึงถูกหลอกให้เชื่อว่าเป็นจุดเริ่มต้นก่อนการรีเฟรช

หากต้องการปิดใช้งานการคืนค่าการเลื่อนอัตโนมัติเพียงแค่เพิ่มแท็กนี้ในส่วนหัว

<script>history.scrollRestoration = "manual"</script>

IE ไม่รองรับ ความเข้ากันได้ของเบราว์เซอร์

หลังจากความล้มเหลวหลายครั้งในที่สุดฉันก็ทำเคล็ดลับได้ anzoถูกต้องที่นี่เนื่องจากการใช้beforeunloadจะทำให้หน้ากระโดดขึ้นไปด้านบนเมื่อผู้ใช้โหลดหน้าซ้ำหรือคลิกลิงก์ วิธีunloadนี้เป็นวิธีที่ชัดเจน

$(window).on('unload', function() {
   $(window).scrollTop(0);
});

วิธี Javascript (ขอบคุณProfNandaa ):

window.onunload = function(){ window.scrollTo(0,0); }

แก้ไข: 16/07/2558

ปัญหาการกระโดดยังคงมีอยู่ใน Firefox แม้จะมีunloadเหตุการณ์

นี่เป็นแนวทางทั่วไปมากขึ้น แทนที่จะพยายามป้องกันไม่ให้เบราว์เซอร์เลื่อน (หรือกระโดดขึ้นไปด้านบนอย่างที่ควรจะเป็น) ฉันแค่กู้คืนตำแหน่งก่อนหน้าบนหน้า คือฉันกำลังบันทึก y-offset ปัจจุบันของเพจใน localStorage และเลื่อนไปที่ตำแหน่งนี้เมื่อโหลดเพจแล้ว

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

คุณสามารถใส่ # ต่อท้ายเพื่อโหลดหน้าเว็บที่ด้านบน

ใช้งานได้กับทุกเบราว์เซอร์มือถือและเดสก์ท็อปเพราะมันง่ายมาก

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// สิ่งนี้จะโหลดหน้าโดยมี # ต่อท้าย

สิ่งนี้ใช้ได้กับฉัน

    //Reset scroll top

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });

คุณควรจะทำได้

Onload ตรวจสอบว่าwindow.location.hashมีค่าหรือไม่ ถ้าเป็นเช่นนั้นให้จับองค์ประกอบที่มีรหัสที่ตรงกับค่าแฮช ค้นหาตำแหน่งขององค์ประกอบ (เรียกซ้ำไปยัง offsetTop / offsetLeft) แล้วส่งค่าเหล่านั้นไปยังwindow.scrollTo(x, y)เมธอด

ควรเลื่อนหน้าไปยังองค์ประกอบที่ต้องการ