Как сделать кнопку наверх в html css

Создание кнопки «наверх» — это довольно простая задача в HTML и CSS. Вот некоторые шаги, которые вам нужно выполнить:

1. Добавьте кнопку в HTML-разметку. Для этого мы можем использовать тег button и внутри него добавить текст «наверх». Например:

<button class="btn-back-to-top">Наверх</button>

2. Оформите кнопку в CSS. Мы можем использовать свойства position, bottom и right, чтобы установить позицию кнопки в правом нижнем углу экрана. Мы также можем добавить стили, чтобы сделать кнопку круглой, задав значения для свойств border-radius и background-color. Например:

.btn-back-to-top {
    background-color: #007bff; /* задаем цвет фона кнопки */
    border-radius: 50%; /* делаем кнопку круглой */
    border: none; /* убираем границы кнопки */
    color: #fff; /* задаем цвет текста */
    cursor: pointer; /* добавляем курсор-указатель при наведении на кнопку */
    font-size: 16px; /* задаем размер шрифта */
    padding: 10px 15px; /* задаем отступы */
    position: fixed; /* фиксируем кнопку */
    bottom: 20px; /* располагаем кнопку снизу */
    right: 20px; /* располагаем кнопку справа */
    z-index: 9999; /* устанавливаем z-index, чтобы кнопка оказалась поверх других элементов */
}

3. Добавьте JavaScript для прокрутки страницы вверх при нажатии на кнопку. Для этого мы можем использовать scrollTo и scrollTop. Например:

const btnBackToTop = document.querySelector('.btn-back-to-top')

btnBackToTop.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
})

Это позволит плавно прокрутить страницу до верхней части, когда пользователь нажмет на кнопку. Конечный результат должен выглядеть примерно так:

<!-- кнопка "наверх" -->
<button class="btn-back-to-top">Наверх</button>

<!-- JavaScript-код -->
<script>
  const btnBackToTop = document.querySelector('.btn-back-to-top')

  btnBackToTop.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })
</script>

<!-- CSS-код -->
<style>
    .btn-back-to-top {
        background-color: #007bff;
        border-radius: 50%;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        padding: 10px 15px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
    }
</style>