Cuộn trở lại đỉnh div

Question

<div id="containerDiv"></div> 

#containerDiv { 
    position: absolute; 
    top: 0px; 
    width: 400px; 
    height: 100%; 
    padding: 5px; 
    font-size: .875em; 
    overflow-y: scroll; 
} 

document.getElementById("containerDiv").innerHTML = variableLongText; 

Làm thế nào để thiết lập lại vị trí cuộn trở lại đầu của container div lần sau?

Answer 1

var myDiv = document.getElementById('containerDiv'); 
myDiv.innerHTML = variableLongText; 
myDiv.scrollTop = 0; 

Xem thuộc tính scrollTop.

Answer 2

Một cách khác để làm điều đó với một hình ảnh động trơn tru là như thế này

$("#containerDiv").animate({ scrollTop: 0 }, "fast"); 

Answer 3

Tôi đã thử các câu trả lời hiện có cho câu hỏi này, và không ai trong số họ làm việc trên Chrome cho tôi. Điều gì đã làm công việc là hơi khác nhau:

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

Answer 4

Đối với tôi cách scrollTop đã không làm việc, nhưng tôi thấy khác:

element.style.display = 'none'; 
setTimeout(function() { element.style.display = 'block' }, 100); 

Không kiểm tra thời gian tối thiểu để vẽ css đáng tin cậy, mặc dù 100ms có thể quá mức.

Answer 5

scrollTo

window.scrollTo(0, 0); 

là giải pháp cuối cùng để di chuyển các cửa sổ để đầu - phần tốt nhất là nó không yêu cầu bất kỳ selector id và thậm chí nếu chúng ta sử dụng cấu trúc IFRAME nó sẽ làm việc cực kỳ tốt.

Phương thức scrollTo() cuộn tài liệu đến tọa độ được chỉ định.
window.scrollTo (xpos, ypos);
xpos Số bắt buộc. Tọa độ để cuộn đến, dọc theo trục x (ngang), theo pixel
ypos Số bắt buộc. Tọa độ để di chuyển đến, dọc theo trục y (dọc), tính theo pixel

jQuery

Một tùy chọn khác cũng làm như vậy được sử dụng jQuery và nó sẽ cung cấp một cái nhìn mượt mà cho cùng

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

trong đó 0 sau scrollTop chỉ định vị trí dọc thanh cuộn trong thông số pixel và thứ hai là thông số tùy chọn hiển thị thời gian tính bằng micro giây để hoàn thành tác vụ.

Answer 6

Đối với những người vẫn không thể thực hiện công việc này, hãy đảm bảo rằng phần tử tràn được hiển thị trước khi sử dụng hàm jQuery.

dụ:

$('#elem').show(); 
$('#elem').scrollTop(0); 

Answer 7

Nếu tràn nội dung html một khung nhìn duy nhất, điều này làm việc cho tôi chỉ sử dụng javascript:

document.getElementsByTagName('body')[0].scrollTop = 0; 

Kính trọng,

Answer 8

này đã làm việc cho tôi:

document.getElementById('yourDivID').scrollIntoView(); 

Answer 9

Nếu bạn muốn cuộn với một chuyển đổi suôn sẻ, bạn có thể sử dụng điều này!

(Vanilla JS)

const tabScroll = document.getElementById("tabScroll"); 
window.scrollTo({ 
    'behavior': 'smooth', 
    'left': 0, 
    'top': tabScroll.offsetTop - 80 
}); 

Nếu người dùng mục tiêu của bạn là Chrome và Firefox, thì đây là tốt! Nhưng tiếc là phương pháp này không được hỗ trợ đủ tốt trên tất cả các trình duyệt. Check Here

Hy vọng điều này sẽ hữu ích !!