scrollTop и пример с кнопкой прокрутки страницы вверх.

Отредактировано: 24 Мая 2023

Для реализации прокрутки страницы вверх на чистом JS используется метод scrollTop. Ниже рассмотрен пример прокрутки страницы вверх по нажатию на кнопку.

html код для кнопки прокрутки страницы вверх:

// некая кнопка со стилями, которая вызывает функцию topFunction() при клике
<div class="btnToTop" id="js-btnToTop" title="Наверх" onclick="topFunction()"></div>

<style>
 .btnToTop{
    position: absolute;
    bottom: 6rem;
    right: 6rem;
    width: 6rem;
    height: 6rem;
    background: red;
    cursor: pointer;
  }
</style>

Чтобы проверить, видит ли браузер клик по кнопке, можно добавить вывод события в консоль:

<div class="btnToTop" id="js-btnToTop" title="Наверх" onclick="console.log("Click!");topFunction()"></div>

По умолчанию Scroll используется на элементах body и html, но в некоторых случаях, из-за особенностей верстки страницы, элемент к которому применяется scroll изменяется. В этом случае надо выяснить на каком элементе установлен нужный overflow: scroll или overflow: auto;

ScrollToTop по умолчанию:

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Такой код не будет работать, если вы изменили прокручиваемый элемент с body, на какой-то другой. 

ScrollToTop , если элемент изменен:

// Находим элемент который изменяет позицию относительно верха:
let Element = document.getElementById("someElementID");
function topFunction() {
  Element.scrollTop = 0;
}

Обратите внимание, что при использовании чистого JS элемент должен быть получен с помощью ID. 

Что бы понять, правильно ли вы выбрали прокручивающийся элемент, можно проверить его позицию с помощью консоли, добавив в функцию topFunction запись о позиции элемента:

// В этом случае в консоли будет появляться текущая позиция элемента.
// Если после прокрутки страницы и клика на кнопку в консоли написано 0 или undefined,
// значит элемент указан не верно
function topFunction() {
  console.log(Element.scrollTop);
}

Еще 1 вариант вычисления позиции относительно верха — повесить функцию на событие прокрутки (если она не срабатывает, элемент выбран не правильно):

// создаем функцию
function scrollFunction() {
     console.log(document.body.scrollTop);
}

// вызываем при скроллинге
document.body.onscroll = function() {scrollFunction()};

Для того, чтобы кнопка не висела на экране всегда, подправим код scrollFunction (обратите внимание, что код указан для значений скроллинга по умолчанию. Если у вас скрол установлен не на body, ищите соответствующую запись выше):

// Получаем ID кнопки
let toTopBtn = document.getElementById("js-btnToTop");

// создаем функцию
function scrollFunction() {
  // Если документ прокручен более чем на 20 px сверху то, показываем кнопку, если нет - прячем
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    toTopBtn.style.display = "block";
  } else {
    toTopBtn.style.display = "none";
  }
}

// вызываем при скроллинге
document.body.onscroll = function() {scrollFunction()};