Прокрутите до начала страницы

Решения CSS и JavaScript для прокрутки к началу страницы

CSS решение

1. Базовое решение CSS

<html>
  <body>
     <a id="top"></a>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

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

2. Решение CSS с плавной прокруткой

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

html { scroll-behavior: smooth; }

Вот результат с эффектом плавной прокрутки.

Однако убедитесь, что не все браузеры поддерживают scroll-behavior

Решение JavaScript

Возможно, вам потребуется запустить прокрутку с помощью JavaScript, и в этом случае есть несколько вариантов:

window.scrollTo()
document.documentElement.scrollTop()
window.scroll()
document.documentElement.scrollIntoView()

1. window.scrollTo ()

window.scrollTo(0, 0) - беспроигрышный вариант для прокрутки окна (или любого другого элемента) обратно наверх. Его поведение при прокрутке также определяется CSS.

Например, без эффекта сглаживания CSS:

<html>
  <body>
    <a onClick="window.scrollTo(0, 0)">Top</a>
  </body>
</html>

Результат:

Например, с CSS scroll-behavior:

<html>
  <style>
    html { scroll-behavior: smooth; }
  </style>
  <body>
    <a onClick="window.scrollTo(0, 0)">Top</a>
  </body>
</html>

даст вам эффект плавной прокрутки, но помните о проблеме поддержки браузером scroll-behavior (как показано ранее).

2. window.scroll

Если вы не используете CSS для эффекта плавной прокрутки, вы можете настроить плавность в JavaScript window.scroll()

window.scroll({
   top: 0,
   left: 0,
   behavior: 'smooth'
});

Например

<html>
  <body>
    <a onClick="window.scroll({ top: 0,left: 0,behavior: 'smooth' });">Top</a>
  </body>
</html>

Также даст вам эффект плавной прокрутки:

Но имейте в виду, что браузер поддерживает ScrollToOptions

3. document.documentElement.scrollTop

Свойство Element.scrollTop получает или задает количество пикселей, на которые содержимое элемента прокручивается по вертикали. document.documentElement.scrollTop scrollTop используется в корневом элементе (элемент <html>).

<a onClick="document.documentElement.scrollTop = 0;">Top</a>

И вот результат, никакого плавного эффекта явно нет. Но это свойство поддерживается практически всеми браузерами.

4. document.documentElement.scrollIntoView ()

Метод scrollIntoView() интерфейса Element прокручивает родительский контейнер элемента таким образом, чтобы элемент, для которого вызывается scrollIntoView(), был виден пользователю. document.documentElement.scrollIntoView() - это особый случай, который scrollIntoView используется в корневом элементе (элементе <html>).

Некоторые браузеры поддерживают scrollIntoViewOptions, который позволяет анимацию перехода.

Например:

<a onClick="document.documentElement.scrollIntoView({ behavior: 'smooth' });">Top</a>