Установить позицию прокрутки

107

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

Я думаю, мне нужно что-то подобное, но это не работает:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

Любые идеи?

Майк Рифгин
источник

Ответы:

178

Вы можете использовать window.scrollTo()вот так:

window.scrollTo(0, 0); // values are x,y-offset
Ник Крейвер
источник
3
это сделает мой день, woohoooooo
АрифМустафа 01
51

Также стоит отметить window.scrollBy(dx,dy)( ref )

аннаката
источник
1
Это было чрезвычайно полезно
Jeff82
34

Обратите внимание , что если вы хотите , чтобы просмотреть элемент вместо полного окна, элементы не имеют scrollToи scrollByметоды. Вам следует:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

Вы можете также имитировать window.scrollToи window.scrollByфункции для всех в несуществующие HTML элементов в веб - страницы на браузерах , которые не поддерживают его изначально :

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

так что вы можете сделать:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

ПРИМЕЧАНИЕ: Object.definePropertyприветствуется, так как прямое добавление свойств в объект prototype- это ломка дурной привычки (когда вы это видите :-).

Хорхе Фуэнтес Гонсалес
источник
Это было полезно, спасибо. Но я обнаружил, что у элементов есть метод scrollTo. См developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex
@Narvalex - это то, что говорится во втором абзаце.
Хорхе Фуэнтес Гонсалес,
Ссылка, на которую я указал, показывает, что эти функции являются встроенными. Нет необходимости определять свойства встроенных методов
Narvalex
@Narvalex О, я только что прочитал "не иметь", мой плохой. Должен сказать, что тогда он был не во всех браузерах, хотя в настоящее время найти такой браузер (например, IE11) сложно.
Хорхе Фуэнтес Гонсалес,
3

... Или просто замените bodyна documentElement:

document.documentElement.scrollTop = 0;
Максим Шёни
источник