จะรับและตั้งค่าตำแหน่งการเลื่อนหน้าเว็บปัจจุบันได้อย่างไร?

121

ฉันจะรับและตั้งค่าตำแหน่งการเลื่อนหน้าเว็บปัจจุบันได้อย่างไร?

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

หากฉันสามารถจับตำแหน่งการเลื่อนปัจจุบันได้ (ในอินพุตที่ซ่อนอยู่) ก่อนที่เพจจะโหลดซ้ำฉันจะสามารถตั้งค่ากลับหลังจากโหลดซ้ำได้

javascript html

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

รูปแบบที่ขับเคลื่อนด้วย AJAX ไม่ใช่วิธีที่ดีกว่าในการป้องกันผลกระทบเหล่านั้น (และแน่นอนว่ามีทางเลือกในกรณีที่ XHR ไม่พร้อมใช้งาน)? การโหลดหน้าซ้ำจะมีหน้าที่ข้ามไปที่ด้านบนและย้อนกลับอีกครั้งซึ่งเป็นมุมมองที่น่ารำคาญ

— Marcel Korpel

118

คุณกำลังมองหาdocument.documentElement.scrollTopอสังหาริมทรัพย์

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

ขอบคุณฉันพบสิ่งนี้ : icles.sitepoint.com/article/javascript-from-scratch/6และแก้ไขgetScrollingPosition()เพื่อเก็บค่าในตัวแปรที่ซ่อนอยู่ จากนั้นใน html ของเพจที่รีเฟรชฉันใช้<body onLoad="window.scrollTo(x,y)โดยที่ x และ y เป็นค่าที่ซ่อนอยู่!

— xyz

46

ฉันพบว่าบน Chrome บน Ubuntu อย่างน้อยdocument.documentElement.scrollTopก็คืนค่า 0 เสมอdocument.body.scrollTopอย่างไรก็ตามดูเหมือนว่าจะใช้งานได้ ในทางกลับกัน Firefox หนึ่งตัวบน Ubuntu กลับเป็นจริง - คุณจะได้ 0 ด้วยbodyและจำนวนที่ถูกต้องด้วยdocumentElement. มีความคิดอะไรให้?

— เลื่อน

12

คำตอบนี้ไม่ถูกต้องเนื่องจากscrollTopคุณสมบัติใช้ไม่ได้กับทุกเบราว์เซอร์ ตรวจสอบwindow.pageXOffsetและwindow.pageYOffsetเพื่อผลลัพธ์ที่ดีขึ้น

— gyo

135

คำตอบที่ยอมรับในปัจจุบันไม่ถูกต้อง - document.documentElement.scrollTopจะแสดงผลเป็น 0 บน Chrome เสมอ เนื่องจาก WebKit ใช้bodyเพื่อติดตามการเลื่อนในขณะที่ Firefox และ IE ใช้htmlใช้

ในการรับตำแหน่งปัจจุบันคุณต้องการ:

document.documentElement.scrollTop || document.body.scrollTop

คุณสามารถตั้งค่าตำแหน่งปัจจุบันเป็น 1000px ด้านล่างของหน้าดังนี้:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

หรือใช้ jQuery (ทำให้เคลื่อนไหวในขณะที่คุณกำลังทำอยู่!):

$("html, body").animate({ scrollTop: "1000px" });

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

5

คำตอบของ gyo การแนะนำwindow.pageYOffsetนั้นสะอาดกว่าหากคุณใช้window.scrollBy()หรือwindow.scrollTo()วิธีการ

— igorsantos07

32

มีความไม่สอดคล้องกันในการที่เบราว์เซอร์แสดงพิกัดการเลื่อนหน้าต่างปัจจุบัน Google ChromeบนMacและiOSดูเหมือนว่าจะเสมอกลับมา0เมื่อใช้document.documentElement.scrollTopหรือของ $(window).scrollTop()jQuery

อย่างไรก็ตามมันทำงานอย่างสม่ำเสมอกับ:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

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

ฉันสังเกตเห็นเหมือนกันว่ามันเป็นบั๊กบน Mac และ iOS หรือไม่?

— Alexander Kim

@AlexanderKim ฉันคิดว่ามันอาจเกี่ยวข้องกับการตีความกฎ CSS บางอย่าง (เช่นโอเวอร์โฟลว์) และมีรายงานว่าใช้งานได้หากตรวจสอบ scrollTop ทั้งใน body และ html องค์ประกอบ อย่างไรก็ตามเพื่อหลีกเลี่ยงการทดสอบและการดีบักฉันมักจะพึ่งพา pageXOffset / pageYOffset ที่ปลอดภัยและสม่ำเสมอเสมอ

— gyo

1

ขอบคุณมากสำหรับคำตอบที่ถูกต้อง

— Michael Paccione

5

ฉันใช้โซลูชันการจัดเก็บข้อมูลในเครื่อง HTML5 ... ลิงก์ทั้งหมดของฉันเรียกใช้ฟังก์ชันที่ตั้งค่านี้ก่อนเปลี่ยน window.location:

localStorage.topper = document.body.scrollTop;

และแต่ละหน้าจะมีสิ่งนี้ในร่างกาย onLoad:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX Labs
แหล่งที่มา

3

จะเป็นการดีกว่าถ้าใช้ setItem () และ getItem () ของ localStorage แทนและสำรองตำแหน่งการเลื่อนเมื่อคลิกแต่ละลิงก์เก็บไว้ครั้งเดียวเมื่อออกจากหน้า: window.addEventListener ("beforeunload", function () {localStorage. setItem ("scrolly", document.documentElement.scrollTop || document.body.scrollTop);});

— StanE