Câu hỏi Cuộn lên đầu trang bằng JavaScript / jQuery?


Tôi có một <button> trên trang, khi nhấn nút này <div> được hiển thị bằng jQuery.

Làm cách nào để cuộn lên đầu trang bằng lệnh JavaScript / jQuery trong hàm đó? Đó là mong muốn ngay cả khi thanh cuộn ngay lập tức nhảy lên đầu. Tôi không tìm kiếm một cuộn trơn tru.


1274
2017-07-17 17:59


gốc




Các câu trả lời:


Nếu bạn không cần thay đổi để tạo hiệu ứng thì bạn không cần phải sử dụng bất kỳ plugin đặc biệt nào - tôi chỉ sử dụng phương thức JavaScript window.scrollTo gốc - chuyển tiếp trong 0,0 sẽ cuộn trang sang phía trên bên trái ngay lập tức .

window.scrollTo(x-coord, y-coord);

Thông số

  • x-coord là điểm ảnh dọc trục ngang.
  • y-coord là pixel dọc theo trục thẳng đứng.

1745
2017-07-17 18:42



Đó là quan điểm của tôi, nếu bạn không cần tạo hiệu ứng động trơn tru thì bạn không cần phải sử dụng jQuery. - daniellmb
Hài hước như bình luận của jeff là trung thực cho những người chỉ muốn mọi thứ để làm việc qua trình duyệt 95% thời gian nên chỉ cần sử dụng jQuery. Điều này là đến từ một người đã viết rất nhiều javascript tinh khiết ngay bây giờ bởi vì chúng tôi không thể đủ khả năng chi phí của một thư viện làm chậm mã quảng cáo: ( - Will
Câu trả lời này không liên quan gì đến câu hỏi. Sẽ ổn nếu câu hỏi là: Tôi nên sử dụng kịch bản và phương pháp nào để cuộn lên đầu trang? Câu trả lời đúng là ở đây: stackoverflow.com/questions/4147112/… - skobaljic
Làm việc cho tôi trong Firefox 40 và Chrome 44 (để giải quyết nhận xét của Mikhail) - tony
Di chuyển đến dưới cùng của trang window.scrollTo(0, document.body.scrollHeight); - emix


Nếu bạn muốn cuộn trơn tru, hãy thử một cái gì đó như thế này:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Điều đó sẽ mất bất kỳ <a> thẻ có href="#top" và làm cho nó cuộn mượt mà lên trên cùng.


1180
2017-07-17 19:43



scrollTop không hoạt động, nó là thuộc tính của phần tử cửa sổ - Jalal El-Shaer
api.jquery.com/scrollTop cho scrollTop của jQuery () - funk-shun
Điều này không hoạt động chính xác khi sử dụng gọi lại đầy đủ của animate, vì nó sẽ chạy nó hai lần. - David Morales
"html" và "body" đều cần thiết cho khả năng tương thích của trình duyệt, tức là cuộn v27 của Chrome chỉ với "phần thân" và IE8 thì không. IE8 cuộn chỉ với "html" nhưng Chrome v27 thì không. - SushiGuy
@jalchr Thực ra, window.pageYOffset sẽ là thuộc tính của đối tượng window e̶l̶e̶m̶e̶n̶t̶. - Alex W


Hãy thử điều này để cuộn lên trên cùng

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

123
2018-05-21 07:45





Bạn không cần jQuery để làm điều này. Một thẻ HTML chuẩn sẽ đủ ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

83
2017-07-17 18:51



+1 Điều này là tốt nếu bạn cần điều hướng đến phần tử cụ thể thay vì chỉ ở trên cùng. - Ish
Sử dụng '<a href="#"> Trên cùng </a>' để nhảy lên đầu trang. - Bakanekobrain
Đây có vẻ là cách tốt nhất để đi khi giao dịch với SPA - Phil
Tốt đẹp! Có cách nào để làm cho nó cuộn trơn tru? - stallingOne


Tất cả các đề xuất này hoạt động tốt cho các tình huống khác nhau. Đối với những người tìm thấy trang này thông qua tìm kiếm, người ta cũng có thể cung cấp điều này một sự cố gắng. JQuery, không có trình cắm thêm, cuộn đến phần tử.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

47
2018-04-23 09:53





cuộn trơn tru, javascript tinh khiết:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

29
2018-05-29 10:49





<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

trong html

<a href="#top">go top</a>

25
2018-02-14 16:44