Cách nhảy lên đầu trang trình duyệt

185

Tôi đang viết một cửa sổ bật lên phương thức và tôi cần trình duyệt nhảy lên trên cùng của màn hình khi nhấn nút chế độ mở. Có cách nào để cuộn trình duyệt lên đầu bằng jQuery không?

— Xuất cảnh
nguồn

404

Bạn có thể đặt scrollTop, như thế này:

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

Hoặc nếu bạn muốn một hình ảnh động nhỏ thay vì chụp nhanh lên trên cùng:

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

— Nick Craver
nguồn

1

tốt ... Tôi đã sử dụng plugin cuộn cho jQuery trước đây để thực hiện điều này - có thể đã lưu một chút mã với mã của bạn ... cảm ơn vì bài học ;-)

— Zathrus Writer

@MikhailBatcer - vô hiệu hóa CSS của bạn và sau đó xem nó có hoạt động không. Bạn có thể gặp vấn đề với cách bạn tạo kiểu htmlvà bodythẻ. mặt khác sử dụng $(window)thay thế.

— mời ngày

Làm thế nào để thêm thời lượng cho hoạt hình-skrolling?

— Maxim Strutinskiy

139

Nếu không có hình ảnh động, bạn có thể sử dụng JS đơn giản:

scroll(0,0)

Với hình ảnh động, kiểm tra câu trả lời của Nick .

— Ionuț Stomsu
nguồn

4

Điều này có được hỗ trợ trong tất cả các trình duyệt không?

— Pacerier

1

scrolllà trong tiêu chuẩn CSSOM trong khi scrollToban đầu được xác định trong DOM Cấp 0 và không phải là một phần của bất kỳ tiêu chuẩn nào. Tuy nhiên, CSSOM bao gồm scrollTokhả năng tương thích ngược.

— Clint Pachl

3

Tôi nghĩ scrollđược hỗ trợ rộng rãi. Xem stackoverflow.com/q/1925671/41906

— Clint Pachl

Cảm ơn. Tôi đoán window && window.scroll(0,0);là chấp nhận được trong mô hình xem của tôi.

— nrodic

34

Nếu bạn đang sử dụng hộp thoại UI UI, bạn chỉ có thể định kiểu phương thức xuất hiện với vị trí cố định trong cửa sổ để nó không bật ra khỏi tầm nhìn, phủ nhận nhu cầu cuộn. Nếu không thì,

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

nên làm thủ thuật.

— Tơ lụa
nguồn

13

Bạn có thể làm điều đó mà không cần javascript và chỉ cần sử dụng thẻ neo? Sau đó, nó sẽ có thể truy cập vào những js miễn phí.

mặc dù khi bạn đang sử dụng các chế độ, tôi cho rằng bạn không quan tâm đến việc js miễn phí. ;)

— S.Kiers
nguồn

1

Sử dụng thẻ neo sẽ làm gián đoạn điều hướng dựa trên hàm băm.

— 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>

Mở rộng đoạn trích

— Manjula Waruna
nguồn

2

Tôi biết điều này đã cũ, nhưng đối với những người gặp vấn đề trong Edge:

Đồng bằng JS: window.scrollTop=0;

Thật không may, scroll()và scrollTo()ném lỗi trong Edge.

— Josh Powlison
nguồn

1

Bạn đang sử dụng hộp thoại UI UI, bạn chỉ có thể định kiểu phương thức xuất hiện với vị trí cố định trong cửa sổ để nó không bật ra khỏi chế độ xem, phủ nhận nhu cầu cuộn. Khác

— bà bầu
nguồn

0

Giải pháp Javascript thuần túy

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

Nếu bạn muốn cuộn trơn tru

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Moghazi
nguồn