วิธีข้ามไปที่ด้านบนสุดของหน้าเบราว์เซอร์


186

ฉันกำลังเขียนป๊อปอัพคำกริยาและฉันต้องการเบราว์เซอร์เพื่อข้ามไปยังด้านบนของหน้าจอเมื่อกดปุ่มเปิดโหมด มีวิธีการเลื่อนเบราว์เซอร์ไปด้านบนโดยใช้ jQuery หรือไม่?

คำตอบ:


405

คุณสามารถตั้งค่าscrollTopเช่นนี้:

$('html,body').scrollTop(0);

หรือถ้าคุณต้องการภาพเคลื่อนไหวเล็ก ๆ น้อย ๆ แทนการสแนปไปด้านบน:

$('html, body').animate({ scrollTop: 0 }, 'fast');

1
ดี ... ฉันใช้ scrollTo plugin สำหรับ jQuery ก่อนที่จะทำสิ่งนี้ให้สำเร็จ - สามารถบันทึกโค้ดด้วยรหัสของคุณเล็กน้อย ... ขอบคุณสำหรับบทเรียน ;-)
Zathrus Writer

@MikhailBatcer - ปิดการใช้งาน CSS แล้วดูว่ามันใช้งานได้หรือไม่ คุณอาจมีปัญหากับสไตล์htmlและbodyแท็กของคุณ มิฉะนั้นใช้$(window)แทน
เรียกใช้

จะเพิ่มระยะเวลาในการเคลื่อนไหวแบบเคลื่อนไหวได้อย่างไร?
Maxim Strutinskiy

139

หากไม่มีภาพเคลื่อนไหวคุณสามารถใช้ JS ธรรมดา:

scroll(0,0)

ที่มีภาพเคลื่อนไหวตรวจสอบคำตอบของนิค


4
สิ่งนี้รองรับในเบราว์เซอร์ทั้งหมดหรือไม่
Pacerier

1
scrollอยู่ในมาตรฐาน CSSOM ในขณะที่scrollToเดิมถูกกำหนดใน DOM ระดับ 0 และไม่ได้เป็นส่วนหนึ่งของมาตรฐานใด ๆ อย่างไรก็ตาม CSSOM รวมถึงscrollToความเข้ากันได้ย้อนหลัง
Clint Pachl

3
ฉันคิดว่าscrollได้รับการสนับสนุนอย่างกว้างขวาง ดูstackoverflow.com/q/1925671/41906
Clint Pachl

ขอบคุณ ฉันเดาว่าwindow && window.scroll(0,0);เป็นที่ยอมรับในโมเดลมุมมองของฉัน
nrodic

34

หากคุณใช้ไดอะล็อก jQuery UI คุณสามารถกำหนดสไตล์ของโมดัลให้ปรากฏพร้อมตำแหน่งที่กำหนดไว้ในหน้าต่างเพื่อไม่ให้ป๊อปอัปไม่ปรากฏโดยไม่ต้องเลื่อน มิฉะนั้น,

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

ควรทำเคล็ดลับ


13

คุณสามารถทำได้โดยไม่ต้องใช้ Javascript และเพียงแค่ใช้แท็ก Anchor? จากนั้นจะสามารถเข้าถึง js เหล่านั้นได้ฟรี

แม้ว่าในขณะที่คุณกำลังใช้ modals ฉันคิดว่าคุณไม่สนใจที่จะเป็นอิสระ ;)


1
การใช้แท็กจุดยึดจะขัดขวางการนำทางแบบแฮช
Tom Landau

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>


2

ฉันรู้ว่ามันเก่า แต่สำหรับผู้ที่มีปัญหาใน Edge:

ธรรมดา JS: window.scrollTop=0;

น่าเสียดายscroll()และscrollTo()โยนข้อผิดพลาดใน Edge


1

คุณกำลังใช้กล่องโต้ตอบ jQuery UI คุณเพียงแค่กำหนดสไตล์ของโมดัลให้ปรากฏพร้อมตำแหน่งที่กำหนดไว้ในหน้าต่างเพื่อไม่ให้ป๊อปอัปออกจากมุมมองโดยไม่จำเป็นต้องเลื่อน อื่น ๆ


0

โซลูชันJavascriptแท้

theId.onclick = () => window.scrollTo(top: 0)

หากคุณต้องการการเลื่อนที่ราบรื่น

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.