Прокрутіть назад до початку поділки, що прокручується

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

Як наступного разу скинути положення прокрутки до верхньої частини контейнера?

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

Дивіться scrollTopатрибут.

Ще один спосіб зробити це з гладкою анімацією, такий

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

Я спробував існуючі відповіді на це питання, і жодна з них не працювала на Chrome для мене. Те, що працювало, було дещо іншим:

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

прокрутити до

window.scrollTo(0, 0);

є найкращим рішенням для прокрутки вікон до верху - найкраща частина полягає в тому, що для цього не потрібен селектор ідентифікаторів, і навіть якщо ми використовуємо структуру IFRAME, він буде працювати надзвичайно добре.

Метод scrollTo () прокручує документ до заданих координат.
window.scrollTo (xpos, ypos);
Необхідний номер xpos. Координату для прокрутки до осі x (горизонтальної) у пікселях
ypos Кількість необхідних. Координату для прокрутки до осі y (вертикальної) у пікселях

jQuery

Інший варіант зробити те саме - використовувати jQuery, і це дасть плавніший вигляд того ж

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

де 0 після scrollTop вказує вертикальну позицію прокрутки в пікселі, а другий параметр - необов'язковий параметр, який показує час у мікросекундах на виконання завдання.

Це працювало для мене:

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

Для тих, хто все ще не може зробити цю роботу, переконайтеся, що переповнений елемент відображається перед використанням функції jQuery .

Приклад:

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

Для мене спосіб scrollTop не працював, але я знайшов інше:

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

Не перевірив мінімальний час для надійного візуалізації css, однак, 100 мс може бути зайвим.

Якщо ви хочете прокрутити плавний перехід, ви можете скористатися цим!

(Ваніль JS)

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

Якщо вашими цільовими користувачами є Chrome та Firefox , це добре! Але, на жаль, цей метод недостатньо підтримується у всіх браузерах. Перевірте тут

Сподіваюся, це допомагає !!

Відповідно до відповіді Франсуа Ноеля "Для тих, хто все ще не може зробити цю роботу, переконайтеся, що переповнений елемент відображається перед використанням функції jQuery."

Я працював у режимі завантаження, який я неодноразово створював дозволи на обліковий запис у діві, який переповнює розмір y. Моя проблема полягала в тому, що я намагався використовувати функцію jquery .scrollTop (0), і це не спрацювало, як би я не намагався це зробити. Мені довелося налаштувати подію для модалу, який не скинув смугу прокрутки, поки модаль не перестане анімувати. Код, який нарешті працював для мене, тут:

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

Якщо вміст html переповнює один огляд, це працювало для мене, використовуючи лише JavaScript:

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

З повагою,

Це єдиний спосіб, який він працював для мене, з плавним переходом прокрутки:

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

Отримуючи елемент за назвою класу, не забудьте значення повернення - це масив; Звідси цей код:

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

Не працювало б. Використовуйте код нижче.

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

Я вважав, що інші люди можуть зіткнутися з подібною проблемою, як і я; тому це повинно зробити трюк.

ці два коди спрацювали для мене як принадність, для цього потрібно буде прокрутити до початку сторінки, але якщо ви хочете прокрутити якийсь конкретний div, використовуйте другий з вашим ідентифікатором div.

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

Якщо ви хочете прокрутити до назви класу, використовуйте наведений нижче код

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

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

Ідентифікатор повинен мати ідентифікатор відповідного div, який має властивість css overflow.

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