Cuộn trở lại đầu div có thể cuộn

<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 để đặt lại vị trí cuộn trở lại đầu div container vào lần tiếp theo?

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

Xem scrollTopthuộc tính.

Một cách khác để làm điều đó với hoạt ảnh mượt mà như thế này

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

Tôi đã thử các câu trả lời hiện có cho câu hỏi này và không câu trả lời nào hoạt động trên Chrome cho tôi. Những gì đã làm việc hơi khác một chút:

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

scrollTo

window.scrollTo(0, 0);

là giải pháp cuối cùng để cuộn cửa sổ lên trên cùng - phần tốt nhất là nó không yêu cầu bất kỳ bộ chọn id nào và ngay cả khi chúng ta sử dụng cấu trúc IFRAME, nó sẽ hoạt động cực kỳ tốt.

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

jQuery

Một tùy chọn khác để làm điều tương tự là sử dụng jQuery và nó sẽ mang lại giao diện mượt mà hơn cho cùng một

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

trong đó 0 sau scrollTop chỉ định vị trí thanh cuộn dọc trong pixel và tham số thứ hai là tham 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ụ.

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

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

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

Thực hiện:

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

Đối với tôi, cách scrollTop không hoạt động, nhưng tôi thấy cách khác:

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

Tuy nhiên, đã không kiểm tra thời gian tối thiểu để hiển thị css đáng tin cậy, 100ms có thể là quá mức cần thiết.

Nếu bạn muốn cuộn với một quá trình chuyển đổi mượt mà, 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ì điều nà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. Kiểm tra tại đây

Hi vọng điêu nay co ich!!

Theo câu trả lời của François Noël "Đối với những người vẫn không thể thực hiện điều này, hãy đảm bảo rằng phần tử bị tràn được hiển thị trước khi sử dụng hàm jQuery."

Tôi đã làm việc trong một phương thức bootstrap mà tôi liên tục đưa ra các quyền tài khoản trong một div tràn trên thứ nguyên y. Vấn đề của tôi là, tôi đang cố gắng sử dụng hàm jquery .scrollTop (0) và nó sẽ không hoạt động cho dù tôi đã cố gắng thực hiện như thế nào. Tôi đã phải thiết lập một sự kiện cho phương thức không đặt lại thanh cuộn cho đến khi phương thức ngừng hoạt ảnh. Mã cuối cùng đã làm việc cho tôi là ở đây:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

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

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

Trân trọng,

Đây là cách duy nhất nó hoạt động với tôi, với quá trình chuyển đổi cuộn mượt mà:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

Khi nhận phần tử theo tên lớp, đừng quên giá trị trả về là một mảng; Do đó mã này:

document.getElementByClassName("dropdown-menu").scrollTop = 0

Sẽ không làm việc. Sử dụng mã bên dưới để thay thế.

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

Tôi nghĩ rằng những người khác cũng có thể gặp phải vấn đề tương tự như tôi; vì vậy điều này sẽ thực hiện thủ thuật.

hai mã này hoạt động đối với tôi giống như một sự quyến rũ mà đầu tiên, mã này sẽ dùng để cuộn lên đầu trang nhưng nếu bạn muốn cuộn đến một số div cụ thể, hãy sử dụng mã thứ hai với id div của bạn.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

Nếu bạn muốn cuộn đến theo tên lớp, hãy sử dụng mã bên dưới

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

ID Nên có id của div tương ứng có thuộc tính css tràn.

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;