Войти
Регистрация

Кнопка "Вверх" для сайта

Кнопка вверх для сайта

Здравствуйте!

В этой статье поговорим о том, как реализовать кнопку "Вверх" для сайта, с помощью которой можно с легкостью вернуться к началу сайта.

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

И так, в первую очередь необходимо подключить библиотеку jQuery.

Вставьте эту строку внутри тега <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Убедитесь, что эта библиотека у Вас уже не подключена ранее, иначе будут конфликты

Теперь нам нужно добавить кнопку на сайт и разместить ее в правом нижнем углу сайта. Для значка "Вверх" у кнопки мы используем спецсимволы HTML.

Вы, если хотите, можете вставить картинку вместо спецсимвола для кнопки, но я создам ее с помощью HTML и CSS:

<div id="up">&raquo;</div>

Установили id="up". Он нам понадобится в скриптах.

И зададим стиль для нее:

#up {
   background:#2095f2;
   border-radius:#4px;
   bottom:15px;
   color:#FFF;
   cursor:pointer;
   display:inline-block;
   font-size:50px;
   line-height:0;
   padding:22px 20px 33px;
   position:fixed;
   right:5px;
   transform:rotate(-90deg);
}

Задали стиль кнопки и разместили ее в правый нижний угол. А также скрыли ее, т.к. она у нас появится после пролистывания вниз на определенном промежутке сайта.

Добавим скрипт, который сделает кнопку видимой при пролистывании сайта вниз:

1<script>
2$(document).ready(function(){
3 $(window).scroll(function(){
4   if($(window).scrollTop() > 1500) {
5        $('#up').fadeIn(500);
6    } else {
7        $('#up').fadeOut(450);
8    }
9});
10});
11</script>

Настройки скрипта:

  • 1500 - расстояние от верхней границы окна браузера до текущего положения полосы прокрутки на котором появится кнопка, размер в пикселях.
  • 500 - длительность анимации появления кнопки, в миллисекундах.
  • 450 - длительность анимации скрытия кнопки, в миллисекундах.

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

1<script>
2$(function(){
3  $('#up').click(function() {
4    $('body,html').animate({scrollTop:0},500);
5 });
6});
7</script>

В данном скрипте 500 это скорость скроллинга до начала страницы в миллисекундах. Чем больше число, тем дольше идет скроллинг к началу страницы.

Посмотреть работу кнопки в действии можете по ссылке:смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?