Плавная прокрутка "Наверх" на чистом CSS без JS

Современные проекты очень часто используют кнопку "Наверх" для удобного пользования интерфейсом. Ведь это ускоряет взаимодействие с проектом в целом. Изначально такие кнопки многие делали на jQuery, но технологии не стоят на месте и можно сделать реализацию кнопки наверх на чистом CSS без использования JS и каких либо библиотек.

За прокрутку страницы отвечают современные методы:

position: sticky
scroll-behavior: smooth

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

<header id="top">Title</header>
<main>
  <article>
    <!-- long form content here -->
  </article>
  <!-- Back to Top link -->
  <div class="back-to-top-wrapper">
    <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
  </div>
</main>

Вторым действием, нам необходимо стилизовать эту кнопку. Добавляем данный код себе в style.css

.back-to-top-wrapper {
  position: absolute;
  top: 100vh;
  right: 0.25rem;
  bottom: -5em;
  width: 3em;
  pointer-events: none;
}

.back-to-top-link {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  pointer-events: all;
  top: calc(100vh - 5rem);
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0.25rem;
  border: 1px solid #254568;
  background-color: #d6e3f0;
  -webkit-transition: -webkit-transform 80ms ease-in;
  transition: -webkit-transform 80ms ease-in;
  transition: transform 80ms ease-in;
  transition: transform 80ms ease-in, -webkit-transform 80ms ease-in;
}
.back-to-top-link:hover, .back-to-top-link:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.back-to-top-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #4e85c0;
}

И последним действием создаем метод для скролла так же в CSS файле

@media screen and (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}

Минусы данного способа:
- Нет поддержки Safari. IE, Opera Mobile