วิธีเลื่อนขึ้นไปด้านบนของหน้าด้วย JavaScript/jQuery?

มีวิธีใดที่จะควบคุมการเลื่อนของเบราว์เซอร์ด้วย JavaScript/jQuery ไหม?

เมื่อฉันเลื่อนหน้าลงไปครึ่งหนึ่ง แล้วทำการรีโหลด ฉันต้องการให้หน้ากลับไปที่ด้านบน แต่กลับพยายามไปหาตำแหน่งการเลื่อนล่าสุด ดังนั้นฉันจึงทำแบบนี้:

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

แต่ไม่โชคดี

แก้ไข:

ดังนั้นคำตอบทั้งสองของคุณทำงานเมื่อฉันเรียกใช้งานหลังจากที่หน้าโหลดเสร็จแล้ว-ขอบคุณ อย่างไรก็ตาม หากฉันเพียงแค่รีเฟรชหน้า ดูเหมือนว่าเบราว์เซอร์จะคำนวณและเลื่อนไปยังตำแหน่งการเลื่อนเก่าของมัน หลังจากเหตุการณ์ .ready (ฉันทดสอบฟังก์ชัน body onload() ด้วย)

ดังนั้นสิ่งที่ติดตามต่อคือ มีวิธีป้องกันไม่ให้เบราว์เซอร์เลื่อนกลับไปยังตำแหน่งเดิม หรือเลื่อนกลับไปยังด้านบนหลังจากที่มันทำสิ่งของของมันแล้วหรือไม่?

คำตอบ #1

โซลูชันแบบข้ามเบราว์เซอร์ด้วย JavaScript ล้วน:

document.body.scrollTop = document.documentElement.scrollTop = 0;

คำตอบ #2

คุณเกือบจะเข้าใจแล้ว - คุณต้องตั้งค่า scrollTop บน body ไม่ใช่ window:

$(function() {
   $('body').scrollTop(0);
});

แก้ไข :

บางทีคุณอาจจะเพิ่มสมอว่างไว้ที่ด้านบนของหน้า:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

คำตอบ #3

ว้าว ฉันมาตอบคำถามนี้ช้าไป 9 ปี นี่เลย:

เพิ่มโค้ดนี้ลงในฟังก์ชัน onload ของคุณ

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

ในการเรียกใช้งานเมื่อหน้าต่างโหลด ให้ใส่โค้ดห่อแบบนี้ (สมมติว่าคุณมีการอ้างอิง JQuery แล้ว)

$(function() {
  // put the code here
});

history.scrollRestoration การรองรับของเบราว์เซอร์:

Chrome: รองรับ (ตั้งแต่เวอร์ชัน 46)

ไฟร์ฟอกซ์: รองรับ (ตั้งแต่เวอร์ชัน 46)

Edge: รองรับ (ตั้งแต่เวอร์ชัน 79)

IE: ไม่รองรับ

โอเปร่า: รองรับ (ตั้งแต่เวอร์ชัน 33)

ซาฟารี: รองรับ

สำหรับ IE หากคุณต้องการเลื่อนกลับขึ้นไปด้านบนหลังจากที่มันเลื่อนลงไปอัตโนมัติ วิธีนี้ใช้ได้ผลสำหรับฉัน:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

คำตอบ #4

อัปเดต

การเลื่อนไปด้านบนของหน้าด้วยเอฟเฟกต์สโครลตอนนี้ง่ายขึ้นเล็กน้อยในจาวาสคริปต์ด้วย:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

มี 2 วิธีในการใช้ scroll API

นี่คือวิธีที่ฉันแนะนำ ใช้วัตถุอ็อปชัน:

window.scroll(options)

นี่เป็นตัวเลือกที่ดีกว่าเนื่องจากคุณสามารถกำหนดพร็อพ behavior ซึ่งใช้แอนิเมชัน easing ที่มีมาในตัวได้

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

วิธีอื่นคือการใช้พิกัด x และ y

window.scroll(x-coord, y-coord)

x-coord - คือพิกเซลตามแกนแนวนอนของเอกสารที่คุณต้องการให้แสดงทางมุมซ้ายบน

y-coord - คือพิกเซลตามแกนตั้งของเอกสารที่คุณต้องการให้แสดงทางมุมซ้ายบน

คำตอบเก่า ห้ามใช้

นี่คือการใช้งาน javascript แบบพื้นฐานของเรา มันมีเอฟเฟกต์ easing ที่เรียบง่ายเพื่อให้ผู้ใช้ไม่ตกใจหลังจากคลิกปุ่ม กลับไปด้านบน

มันมีขนาดเล็กมากและจะยิ่งเล็กลงเมื่อถูกย่อเล็กลง นักพัฒนาที่กำลังมองหาทางเลือกแทนวิธี jquery แต่ต้องการผลลัพธ์เดียวกันสามารถลองใช้วิธีนี้ได้

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

เอชทีเอ็มแอล

<button id="to-top">To Top</button>

ชนแก้ว!

คำตอบ #5

มีวิธีใดที่จะป้องกันไม่ให้เบราว์เซอร์เลื่อนไปยังตำแหน่งเดิม หรือเลื่อนกลับไปด้านบนหลังจากที่มันทำงานเสร็จไหม?

โค้ด jquery ต่อไปนี้ใช้ได้ผลสำหรับฉัน:

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

คำตอบ #6

นี่คือเวอร์ชันเลื่อนแบบแอนิเมชันด้วย JavaScript ล้วน สำหรับคนที่ไม่ใช้ jQuery :D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

แล้วก็:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

คำตอบ #7

โซลูชันสมัยใหม่ในปี 2021

document.body.scrollIntoView({behavior: "smooth"});

ทำงานได้กับทุกเบราว์เซอร์รวมถึง IE (เบราว์เซอร์เวอร์ชันเก่าไม่รองรับการเลื่อนอย่างราบรื่น)

คำตอบ #8

นี่ใช้ได้สำหรับฉัน:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

ใช้ setTimeout สั้น ๆ ภายใน onload เพื่อให้เบราว์เซอร์มีโอกาสในการเลื่อนหน้า.

คำตอบ #9

คุณสามารถใช้กับ jQuery ได้

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

คำตอบ #10

ใช้ฟังก์ชันต่อไปนี้

window.scrollTo(xpos, ypos)

ที่นี่ต้องระบุ xpos พิกัดที่จะเลื่อนไปตามแกน x (แนวนอน) เป็นพิกเซล

ypos ก็จำเป็นเช่นกัน พิกัดที่จะเลื่อนถึง ตามแกน y (แนวตั้ง) เป็นพิกเซล