Tự động cuộn xuống cuối trang


415

Hãy xem xét tôi có một danh sách các câu hỏi. Khi tôi nhấp vào câu hỏi đầu tiên, nó sẽ tự động đưa tôi xuống cuối trang.

Đối với một vấn đề thực tế, tôi biết rằng điều này có thể được thực hiện bằng cách sử dụng jQuery.

Vì vậy, bạn có thể cung cấp cho tôi một số tài liệu hoặc một số liên kết nơi tôi có thể tìm thấy câu trả lời cho câu hỏi này?

EDIT: Cần cuộn đến một phần tử HTML cụ thể ở cuối trang


Câu trả lời:


807

jQuery không cần thiết. Hầu hết các kết quả hàng đầu tôi nhận được từ một tìm kiếm Google đã cho tôi câu trả lời này:

window.scrollTo(0,document.body.scrollHeight);

Nơi bạn có các phần tử lồng nhau, tài liệu có thể không cuộn. Trong trường hợp này, bạn cần nhắm mục tiêu phần tử cuộn và sử dụng chiều cao cuộn thay thế.

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

Bạn có thể buộc nó vào onclicksự kiện của câu hỏi của bạn (tức là <div onclick="ScrollToBottom()" ...).

Một số nguồn bổ sung bạn có thể xem qua:


29
Không làm việc cho tôi. Tôi đã làm điều này : element.scrollTop = element.scrollHeight.
Esamo

7
Ngày 4 tháng 5 năm 2016: Xin lưu ý rằng chức năng "scrollTo" là thử nghiệm và không hoạt động trong tất cả các trình duyệt.
corgrath

1
scrollto không hoạt động trên trình duyệt của tôi, tôi đã xem qua liên kết này bên dưới stackoverflow.com/questions/8917921/ mẹo rất hữu ích vì các giải pháp hoạt động trên các trình duyệt tôi đã thử.
dùng3655574

đối với một phần tử riêng biệt, đây là giải pháp hoạt động: document.querySelector (". scrollingContainer"). scrollTo (0, document.querySelector (". scrollingContainer"). scrollHeight);
mPrinC

Có thể phải đặt html, chiều cao cơ thể thành 100% để cuộn xuống dưới cùng
Trever Thompson

106

Nếu bạn muốn cuộn toàn bộ trang xuống dưới cùng:

var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

Xem mẫu trên JSFiddle

Nếu bạn muốn cuộn một phần tử xuống dưới cùng:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

Và đó là cách nó hoạt động:

nhập mô tả hình ảnh ở đây

Tham chiếu: scrollTop , scrollHeight , clientHeight

CẬP NHẬT: Các phiên bản mới nhất của Chrome (61+) và Firefox không hỗ trợ cuộn cơ thể, xem: https://dev.opera.com/articles/fixing-the-scrolltop-orms/


Giải pháp hoạt động với Chrome, Firefox, Safari và IE8 +. Kiểm tra liên kết này để biết thêm chi tiết quirksmode.org/dom/w3c_cssom.html
Tho

1
@luochenhuan, tôi vừa sửa mã mẫu bằng cách sử dụng "document.scrollingEuity" thay vì "document.body", xem ở trên
David Avsaj Biếnvili

58

Triển khai Vanilla JS:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView


3
với jQuery $ ('# id') [0] .scrollIntoView (false);
alexoviedo999

4
tại thời điểm này chỉ có Firefox
thời gian chúng tôi

Hiện tại hoạt động trong các phiên bản Chrome mới hơn, nhưng một số tùy chọn bổ sung (như cuộn trơn tru) dường như chưa được triển khai.
Matt Zukowski

Tôi đã thêm một div trống ở cuối trang và sử dụng id của div đó. Làm việc hoàn hảo.
Nisba

5
Thậm chí tốt hơn:element.scrollIntoView({behavior: "smooth"});
blalond

26

Bạn có thể sử dụng điều này để đi xuống trang ở định dạng hoạt hình.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

23

Dưới đây nên là giải pháp trình duyệt chéo. Nó đã được thử nghiệm trên Chrome, Firefox, Safari và IE11

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo (0, document.body.scrollHeight); không hoạt động trên Firefox, ít nhất là đối với Firefox 37.0.2


1
làm việc trong Firefox 62.0.3, nhưng tôi đã không có đầu mối khi họ cố định đó.
zb226

12

Đôi khi, trang kéo dài khi cuộn đến mông (ví dụ: trong các mạng xã hội), để cuộn xuống cuối (phần cuối cùng của trang) Tôi sử dụng tập lệnh này:

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

Và nếu bạn đang ở trong bảng điều khiển javascript của trình duyệt, có thể hữu ích để có thể dừng cuộn, vì vậy hãy thêm:

var stopScroll = function() { clearInterval(scrollInterval); };

Và sau đó sử dụng stopScroll();.

Nếu bạn cần cuộn đến phần tử cụ thể, hãy sử dụng:

var element = document.querySelector(".element-selector");
element.scrollIntoView();

Hoặc tập lệnh phổ quát để tự động kiểm soát thành phần cụ thể (hoặc dừng khoảng thời gian cuộn trang):

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

let size = ($ ("div [class * = 'card-insert']")). length; ($ ("div [class * = 'card-insert']")) [size -1] .scrollIntoView ();
nobjta_9x_tq

11

Bạn có thể sử dụng chức năng này bất cứ nơi nào bạn cần gọi nó:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: Di chuyển đến


Đối với tôi, document.getElementById('copyright').scrollTop += 10không hoạt động (trong Chrome mới nhất) ... vẫn là con số không ...
Kyle Baker

10

bạn cũng có thể làm điều này với hình ảnh động, nó rất đơn giản

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

mong giúp, cảm ơn


7

một lớp lót để cuộn mịn xuống phía dưới

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

Để cuộn lên, chỉ cần đặt topthành0


4

Bạn có thể đính kèm bất kỳ idthuộc tính tham chiếu nào hrefcủa thành phần liên kết:

<a href="#myLink" id="myLink">
    Click me
</a>

Trong ví dụ trên khi người dùng nhấp Click mevào cuối trang, điều hướng đến Click mechính nó.


Điều này không dành cho tôi vì nó thay đổi url và sau đó ứng dụng góc cạnh của tôi chuyển hướng sang thứ khác!
heman123

3

Bạn có thể thử Gentle Anchorors một plugin javascript đẹp.

Thí dụ:

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

Kiểm tra tính tương thích trên:

  • Mac Firefox, Safari, Opera
  • Windows Firefox, Opera, Safari, Internet Explorer 5.55+
  • Linux chưa được kiểm tra nhưng sẽ ổn với Firefox ít nhất

3

Đến bữa tiệc muộn, nhưng đây là một số mã chỉ javascript đơn giản để cuộn bất kỳ phần tử nào xuống phía dưới:

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

3

Để cuộn xuống trong Selenium sử dụng mã dưới đây:

Cho đến khi thả xuống dưới, cuộn cho đến chiều cao của trang. Sử dụng mã javascript dưới đây sẽ hoạt động tốt trong cả hai, JavaScript và React.

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");

3

Vì vậy, nhiều câu trả lời cố gắng tính chiều cao của tài liệu. Nhưng nó đã không tính toán chính xác cho tôi. Tuy nhiên, cả hai đều hoạt động:

jquery

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

hoặc chỉ js

    window.scrollTo(0,9999);

LOL "đã làm việc". Nếu tài liệu dài hơn 9999?
Dan Dascalescu

1
@DanDascalescu 99999
Andrew

2

Đây là giải pháp của tôi:

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

Cái gì ... thậm chí đang diễn ra ở đó? Quan tâm bạn giải thích giải pháp của bạn? Câu trả lời chỉ có mã được khuyến khích.
Dan Dascalescu

0

Điều này sẽ đảm bảo cuộn xuống phía dưới

Mã đầu

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

Mã cơ thể

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

0

Một bưc tranh đang gia ngan lơi noi:

Chìa khóa là:

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

Nó đang sử dụng document.documentElement, đó là <html>yếu tố. Nó cũng giống như sử dụng window, nhưng đó chỉ là sở thích cá nhân của tôi để làm theo cách này, bởi vì nếu nó không phải là toàn bộ trang mà là một container, nó hoạt động như thế này trừ khi bạn thay đổi document.bodydocument.documentElementchuyển sang document.querySelector("#container-id").

Thí dụ:

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

  document.documentElement.scrollTo({
    left: 0,
    top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
    behavior: 'smooth'
  });

}, 1000);
body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Bạn có thể so sánh sự khác biệt nếu không có scrollTo():


0

Một cách đơn giản nếu bạn muốn cuộn xuống phần tử cụ thể

Gọi chức năng này bất cứ khi nào bạn muốn cuộn xuống.

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}
ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}
<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>


Điều này không đơn giản , và yêu cầu tạo ra một scrollyếu tố.
Dan Dascalescu

@DanDascalescu Bạn nói đúng! nhưng mã của tôi hoạt động tôi không nghĩ rằng nó đáng bị bỏ phiếu
Shrroy

"Công trình" là không đủ. Tất cả các giải pháp trên trang này "hoạt động" ở một mức độ nào đó. Và có một tấn trong số họ. Người đọc nên quyết định như thế nào?
Dan Dascalescu

0

Tôi có một ứng dụng Angular với nội dung động và tôi đã thử một vài câu trả lời ở trên mà không có nhiều thành công. Tôi đã điều chỉnh câu trả lời của @ Konard và khiến nó hoạt động trong JS đơn giản cho kịch bản của tôi:

HTML

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

Mã não

function scrollToBottom() {
    scrollInterval;
    stopScroll;

    var scrollInterval = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    }, 50);

    var stopScroll = setInterval(function () {
        clearInterval(scrollInterval);
    }, 100);
}

Đã thử nghiệm trên trình duyệt Android, Chrome, Edge và stock Android mới nhất. Đây là một câu đố:

https://jsfiddle.net/cbruen1/18cta9gd/16/


-1
getDocHeight: function() {
  var D = document;
  return Math.max(
    D.body.scrollHeight,
    D.documentElement.scrollHeight,
    D.body.offsetHeight,
    D.documentElement.offsetHeight,
    D.body.clientHeight,
    D.documentElement.clientHeight
  );
}

document.body.scrollTop = document.documentElement.scrollTop = this.getDocHeight();

-1

window.scrollTo (0,1e10);

luôn luôn làm việc

1e10 là một con số lớn. vì vậy nó luôn luôn là cuối trang.


-1

Nếu bất cứ ai tìm kiếm Angular

bạn chỉ cần cuộn xuống thêm cái này vào div của bạn

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.