Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Хотите получать заявки моментально? Вся наша команда и партнеры приступят к проекту, подключив также продвижение Авито. Подходит для тех, кого не удовлетворяет имеющийся объем продаж. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение + Авито продвижение.

от 189000 

Услуги веб дизайна под ключ.

от 29500 

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

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

  1. Добавьте кнопку в HTML-разметку. Для этого мы можем использовать тег button и внутри него добавить текст «наверх». Например:
<button class="btn-back-to-top">Наверх</button>
  1. Оформите кнопку в CSS. Мы можем использовать свойства positionbottom и 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, чтобы кнопка оказалась поверх других элементов */
}
  1. Добавьте 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>
Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.