บังคับให้เลื่อนตำแหน่งหน้าไปด้านบนที่รีเฟรชหน้าใน HTML

129

ฉันสร้างเว็บไซต์ที่ฉันกำลังเผยแพร่ด้วยdivs เมื่อฉันรีเฟรชหน้าเว็บหลังจากเลื่อนไปยังตำแหน่ง X แล้วโหลดหน้าด้วยตำแหน่งเลื่อนเป็น X

ฉันจะบังคับให้เลื่อนหน้าเว็บไปที่ด้านบนของการรีเฟรชหน้าได้อย่างไร?

สิ่งที่ฉันคิดว่าเป็นของ JS หรือ jQuery ทำงานเป็นonLoad()หน้าที่ของตลาดหลักทรัพย์เพื่อเลื่อนหน้าไปด้านบน แต่ฉันไม่รู้ว่าฉันจะทำสิ่งนั้นได้อย่างไร
ตัวเลือกที่ดีจะถ้ามีเป็นทรัพย์สินบางส่วนหรือบางสิ่งบางอย่างที่จะได้หน้าเต็มไปด้วยเลื่อนตำแหน่งของมันเป็นค่าเริ่มต้น (คือที่ด้านบน) ซึ่งจะเป็นชนิดเช่นการโหลดหน้าแทนการรีเฟรชหน้า

— ดวงจันทร์
แหล่งที่มา

น่าแปลกใจที่ไม่มีวิธีแก้ไขปัญหาใดที่เหมาะกับฉัน แต่สิ่งนี้ทำได้: stackoverflow.com/a/11486546/470749

— Ryan

165

คุณสามารถทำได้โดยใช้วิธีการscrollTopในDOM พร้อม :

$(document).ready(function(){
    $(this).scrollTop(0);
});

— ตบเบา ๆ
แหล่งที่มา

9

ไม่ทำงานบน Safari แต่นี่ -> stackoverflow.com/a/18633915/102133ทำ

— Ben

165

สำหรับการนำ JavaScript ธรรมดาไปใช้ง่าย:

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

ขยายตัวอย่างข้อมูล

— ProfNandaa
แหล่งที่มา

1

นี่คือคำตอบที่ถูกต้อง โซลูชัน jQuery ไม่สามารถใช้งานได้ในทุกกรณี

— Harry Stevens

@ Paul12_ - ฉันเพิ่งทดสอบSafari 11.0.3และใช้ได้ดีสำหรับฉันคุณใช้อันไหน

— ProfNandaa

สิ่งนี้ไม่ได้ผลสำหรับฉัน ฉันต้องกลับจากฟังก์ชั่นโหลดโหลดเพื่อให้มันทำงานได้

— บัล

@Iqbal - คุณทำreturnอะไร?

— ProfNandaa

1

การเพิ่มdocument.querySelector('html').style.scrollBehavior = '';อาจจำเป็นเช่นกัน หากตั้งค่าsmoothเป็นอาจไม่สามารถขึ้นไปด้านบนก่อนโหลดหน้าซ้ำ

— kevnk

35

คำตอบที่นี่ใช้ไม่ได้กับเอกสารซาฟารีมักถูกไล่ออกเร็วเกินไป

ควรใช้beforeunloadเหตุการณ์ที่ทำให้คุณไม่สามารถทำงานได้setTimeout

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

— เบน
แหล่งที่มา

1

เพิ่มฟังก์ชั่นเลื่อนหลังจาก: $ ('html'). text (''); ดังนั้นผู้เดินเล่นจะถูกรีเซ็ต

— user956584

1

@Userpassword คุณไม่คิดว่า $ ("html"). remove () จะดีกว่าไหม?

— Ben

18

อีกครั้งคำตอบที่ดีที่สุดคือ:

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

(นั่นคือไม่ใช่ jQuery ค้นหาว่าคุณกำลังค้นหาวิธี JQ)

แก้ไข: ข้อผิดพลาดเล็ก ๆ น้อย ๆ ของมัน "onbeforunload" :) Chrome และเบราว์เซอร์อื่น ๆ "จดจำ" ตำแหน่งเลื่อนสุดท้ายก่อนที่จะทำการขนถ่ายดังนั้นหากคุณตั้งค่าเป็น 0,0 ก่อนที่จะโหลดหน้าเว็บของพวกเขาพวกเขาจะจำได้ 0,0 และชนะ ไม่เลื่อนกลับไปที่แถบเลื่อนอยู่ :)

— xoxel
แหล่งที่มา

@ Paul12_ Safari ต้องใช้document.documentElement.scrollTopงาน ฉันมักจะใช้ทั้งสองอย่าง

— Graham O'Mahony

9

ตรวจสอบ.scrollTop()ฟังก์ชันjQuery ที่นี่

มันจะมีลักษณะเหมือน

$(document).load().scrollTop(0);

— jon3laze
แหล่งที่มา

9

คุณสามารถลอง

$(document).ready(function(){
    $(window).scrollTop(0);
});

หากคุณต้องการเลื่อนที่ตำแหน่ง x มากกว่าที่คุณสามารถเปลี่ยนค่า 0 เป็น x

— Ankit
แหล่งที่มา

7

แทนการเพียงแค่ใช้location.reload() location.href = location.hrefมันจะไม่เลื่อนไปยังตำแหน่งเดิมเป็นlocation.reload()ไม่

หมายเหตุ: นี่จะไม่โหลดซ้ำหากมี # ใด ๆ ใน URL

— Nauphal
แหล่งที่มา

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

ใส่สคริปต์ข้างต้นใน<head>แท็กของ html ของคุณ ไม่แน่ใจว่าแอปพลิเคชันหน้าเดียวทำงานอย่างไร! แต่แน่ใจว่าใช้งานได้อย่างมีเสน่ห์ในหน้าปกติ

— harshes53
แหล่งที่มา

4

คำตอบที่นี่ (เลื่อนเข้า $(document).ready ) ไม่ทำงานหากมีวิดีโอในหน้า ในกรณีนี้หน้าจะเลื่อนหลังจากเหตุการณ์นี้เริ่มทำงานแล้วแทนที่งานของเรา

คำตอบที่ดีที่สุดควรเป็น:

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

— DrPollit0
แหล่งที่มา

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

ไม่ทำงานสำหรับฉันเนื่องจาก google chrome จะเลื่อนกลับลงมาหลังจากที่โหลดหน้าเว็บเสร็จ สิ่งที่ฉันใช้คือ

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

// ซึ่งจะโหลดหน้าเว็บด้วย # ที่ส่วนท้าย ดังนั้นมันจะโหลดที่ด้านบนเสมอ

— Daut
แหล่งที่มา

3

ในการรีเซ็ตหน้าต่างเลื่อนกลับไปด้านบน$(window).scrollTop(0)ในเหตุการณ์ก่อนที่จะทำการโหลดเทคนิคต่างๆอย่างไรก็ตามฉันทดสอบใน Chrome 80 มันจะกลับไปที่ตำแหน่งเดิมหลังจากโหลดซ้ำ

เพื่อป้องกันไม่ให้การตั้งค่าไปhistory.scrollRestoration"manual"

//Reset scroll top

history.scrollRestoration = "manual";

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

— อเล็กซ์มีความสนุกสนาน
แหล่งที่มา

นี่คือการตอบสนองที่ดีที่สุดสำหรับฉันทำงานบน Chrome / Linux

— SNS - เว็บและ Informatique

0

คำตอบ supercalifragilisticexpialidocious คือ:

เพิ่มที่ด้านบนของไฟล์jsหรือแท็กสคริปต์ของคุณ

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Nicobels
แหล่งที่มา