Вернитесь к началу прокручиваемого div


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

Как в следующий раз вернуть позицию прокрутки в верхнюю часть контейнера div?

Ответы:


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

Смотрите scrollTopатрибут.


Пытался, но не получилось. Когда variableLongtext загружается в контейнер div и я смотрю на его середину, затем смахните на новый variableLongtext, он появится в контейнере, но мы не будем смотреть на его верхнюю часть, он уже будет прокручиваться немного вниз.
imhere

2
@ s12345 Вам лучше создать воспроизводимый тестовый пример, показывающий нам вашу проблему (например, на jsfiddle.net ), и сказать, на какой ОС / браузере / версии вы столкнулись с этой проблемой .
Phrogz

2
Извините за ошибку .. это работает! Запутались с двумя похожими div.
imhere

63

Другой способ сделать это с плавной анимацией выглядит так

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

7
Работает хорошо, но, пожалуйста , не используйте slow, это так ... медленно!
Паскаль

1
Вместо того, чтобы передавать slowв качестве второго аргумента. Вы можете передать целое число, которое будет количеством миллисекунд до завершения анимации.
Sushant Gupta

2
Поменял на быстрый :)
Махмуд Ибрагим

1
Лучший ответ! Спасибо!
YogaPanda,

1
Это отлично работает, если вы используете jquery. Если вы используете angular typescript (простой javascript), это не сработает. как вы можете добиться этого с помощью простого javascript.
Babulaas

27

Я попробовал существующие ответы на этот вопрос, и ни один из них не помог мне в Chrome. Что работало, было немного иначе:

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

16

scrollTo

window.scrollTo(0, 0);

- это идеальное решение для прокрутки окон вверх - самое приятное то, что он не требует никакого селектора идентификаторов, и даже если мы будем использовать структуру IFRAME, он будет работать очень хорошо.

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

JQuery

Другой вариант сделать то же самое - использовать jQuery, и он даст более плавный вид для того же

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

где 0 после scrollTop указывает положение вертикальной полосы прокрутки в пикселе, а второй параметр является необязательным параметром, который показывает время в микросекундах для выполнения задачи.


1
что, если мы хотим прокрутить только внутренний div вверх? В конечном итоге это не сработает.
Джон Лорд

1
Элементы также имеют метод .scrollTo, вы можете это сделатьdocument.getElementById('scroller').scrollTo(0,0)
Mojimi

15

Это сработало для меня:

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

Это мое предпочтительное решение. Для плавного перехода добавьте следующее:document.getElementById("yourDivID").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
Крис

Также обратите внимание, что это scollIntoViewработает , только если вы вызываете его для элемента, который нужно прокрутить. Другими словами, не называйте его на элемент , который вы хотите , чтобы прокрутить до , вызовите его на элемент , который вы хотите прокрутки.
Крис

9

Для тех, кто по-прежнему не может справиться с этой задачей, перед использованием функции jQuery убедитесь, что отображается переполненный элемент .

Exemple:

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

1
Спасатель жизни! Стало терять желание жить с неработающим scrollTop! пришлось поместить мой вызов scrollTop в функцию setTimeout.
AVFC_Bubble88 01

Я чувствую то же самое! Я работал в модальном диалоговом окне начальной загрузки. Мне пришлось настроить событие для модального окна, которое не сбрасывает полосу прокрутки, пока модальное окно не перестанет анимироваться. Это код, который я использовал: $ ('# add_modal'). On ('shown.bs.modal', function (e) {$ ('div.border'). ScrollTop (0);});
Ирв Леннерт

2

Для меня способ scrollTop не работал, но я нашел другое:

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

Не проверял минимальное время для надежного рендеринга css, 100 мс может быть излишним.


2

Если вы хотите прокручивать с плавным переходом, вы можете использовать это!

(Ванильный JS)

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

Если вашими целевыми пользователями являются Chrome и Firefox , тогда это хорошо! Но, к сожалению, этот метод поддерживается не всеми браузерами. Проверить здесь

Надеюсь это поможет!!


2

Согласно ответу Франсуа Ноэля: «Для тех, кто все еще не может выполнить эту работу, убедитесь, что перед использованием функции jQuery отображается переполненный элемент».

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

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

1

Если html-контент переполняет одно окно просмотра, это сработало для меня, используя только javascript:

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

С Уважением,


1

У меня это сработало только так, с плавным переходом прокрутки:

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

1

При получении элемента по имени класса не забывайте, что возвращаемое значение - это массив; Отсюда этот код:

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

Не сработает. Вместо этого используйте код ниже.

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

Я подумал, что другие люди могут столкнуться с подобной проблемой, как и я; так что это должно помочь.


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

0

Идентификатор должен иметь идентификатор соответствующего div, имеющего свойство css переполнения.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.