ฉันกำลังพยายามตั้งค่าตำแหน่งการเลื่อนบนหน้าเพื่อให้ตัวเลื่อนเลื่อนไปทางด้านบนจนสุด
ฉันคิดว่าฉันต้องการอะไรแบบนี้ แต่มันใช้ไม่ได้:
(function () { alert('hello'); document.body.scrollTop = 0; } ());
ความคิดใด ๆ ?
ฉันกำลังพยายามตั้งค่าตำแหน่งการเลื่อนบนหน้าเพื่อให้ตัวเลื่อนเลื่อนไปทางด้านบนจนสุด
ฉันคิดว่าฉันต้องการอะไรแบบนี้ แต่มันใช้ไม่ได้:
(function () { alert('hello'); document.body.scrollTop = 0; } ());
ความคิดใด ๆ ?
คำตอบ:
คุณสามารถใช้window.scrollTo()ดังนี้:
window.scrollTo(0, 0); // values are x,y-offset
โปรดทราบว่าหากคุณต้องการเลื่อนองค์ประกอบแทนที่จะเป็นแบบเต็มหน้าต่างองค์ประกอบจะไม่มีscrollToและscrollByวิธีการ คุณควร:
var el = document.getElementById("myel"); // Or whatever method to get the element
// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;
// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;
นอกจากนี้คุณยังสามารถเลียนแบบwindow.scrollToและwindow.scrollByฟังก์ชันกับองค์ประกอบ HTML ที่มีอยู่ทั้งหมดในเว็บเพจบนเบราว์เซอร์ที่ไม่รองรับโดยกำเนิด :
Object.defineProperty(HTMLElement.prototype, "scrollTo", {
value: function(x, y) {
el.scrollTop = y;
el.scrollLeft = x;
},
enumerable: false
});
Object.defineProperty(HTMLElement.prototype, "scrollBy", {
value: function(x, y) {
el.scrollTop += y;
el.scrollLeft += x;
},
enumerable: false
});
ดังนั้นคุณสามารถทำได้:
var el = document.getElementById("myel"); // Or whatever method to get the element, again
// To set the scroll
el.scrollTo(0, 0);
// To increment the scroll
el.scrollBy(100, 100);
หมายเหตุ: Object.definePropertyได้รับการสนับสนุนเนื่องจากการเพิ่มคุณสมบัติโดยตรงprototypeเป็นการทำลายนิสัยที่ไม่ดี (เมื่อคุณเห็น :-)
... หรือเพียงแค่แทนที่bodyโดยdocumentElement:
document.documentElement.scrollTop = 0;