Опубликовано: 13.02.2021

Кнопка «Наверх» на странице сайта

Если содержимое страницы сайта имеет достаточно большой размер по вертикали, то на странице обязательно должна присутствовать кнопка «Наверх», позволяющая пользователю быстро вернуться к началу страницы. Ведь именно в начале страницы, как правило, размещаются все навигационные меню сайта.

Самый простой вариант такой кнопки — ссылка с рисунком в качестве содержимого. Якорем для ссылки служит идентификатор самого верхнего на странице элемента (то есть элемента, в верхней границе которого будет возвращён пользователь при нажатии на кнопку). Элемент с кнопкой в исходном коде следует разместить в самом конце документа, ближе к закрывающему тегу </body>.

<body>
   <div id="top-page">
      . . .
   </div>

   . . .

   <div class="floating-button">
      <a id="arrow" href="#top-page" title="К началу страницы">
         <img src="files/button.gif" width="40" height="40" alt="">
      </a>
   </div>
</body>

Реальное положение кнопки на странице (а точнее, элемента с кнопкой) следует отрегулировать с помощью средств CSS. Это положение следует выбрать таким, чтобы кнопка как можно меньше мешала просмотру содержимого страницы. Поэтому здесь немаловажным фактором будет размер кнопки и её цвет: она должна быть заметна, но при этом не должна раздражать своим цветом и фактом присутствия. При необходимости кнопку можно сделать полупрозрачной, используя CSS-свойство opacity.

.floating-button {
   position: fixed;  /* фиксируем позицию */
   top: 20px;        /* расстояние от верхней границы экрана */
   right: 20px;      /* расстояние от правой границы экрана */
}

#arrow	{
   display: none;    /* скрываем рисунок-ссылку до нужного момента */
}

Для показа/скрытия кнопки пишется небольшой скрипт, который следует разместить также перед закрывающим тегом </body>, чтобы загрузка скрипта происходила только после загрузки основного контента страницы.

<script>
   window.onscroll = function() {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop;
      if (scrolled > 550) {
         // Если страница прокручена вниз более, чем на 550 пикселей,
         // выводим кнопку на экран
         document.getElementById('arrow').style.display = 'block';
      } else {
         // В противном случае убираем кнопку с экрана
         document.getElementById('arrow').style.display = 'none';
      }
   }
</script>

Если весь этот код разместить в одном файле, то выглядеть это будет следующим образом:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      .floating-button {
         position: fixed;     /* фиксируем позицию */
         top: 20px;           /* расстояние от верхней границы экрана */
         right: 20px;         /* расстояние от правой границы экрана */
      }

      #arrow {display: none;} /* скрываем рисунок-ссылку до нужного момента */
   </style>
</head>
<body>
   <div id="top-page">
      . . .
   </div>

   . . .

   <div class="floating-button">
      <a id="arrow" href="#top-page" title="К началу страницы">
         <img src="files/button.gif" width="40" height="40" alt="">
      </a>
   </div>
   <script>
      window.onscroll = function() {
         var scrolled = window.pageYOffset || document.documentElement.scrollTop;
         if (scrolled > 550) {
            // Если страница прокручена вниз более, чем на 550 пикселей,
            // выводим кнопку на экран
            document.getElementById('arrow').style.display = 'block';
         } else {
            // В противном случае убираем кнопку с экрана
            document.getElementById('arrow').style.display = 'none';
         }
      }
   </script>
</body>
</html>

А так это может выглядеть в браузере:

Результат в браузере

Примечание: Если в сценариях на странице планируется использовать функции из библиотеки jQuery, то вышеприведённый исходный JavaScript-код можно заменить следующим:

<!-- Загружаем библиотеку jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Сценарий показа/скрытия кнопки -->
<script>
   $(document).ready(function(){
      $(window).scroll(function() {
         if($(window).scrollTop() > 550) {
            // показываем элемент, если страница прокручена вниз
            // более, чем на 550 пикселей
            $('#arrow').show();
         } else {
            // иначе делаем элемент скрытым
            $('#arrow').hide();
         }
      });
   });
</script>

Возврат к началу страницы в вышеприведённых примерах организован как переход по ссылке, поэтому происходит он быстро. Однако иногда для возврата к началу страницы имеет смысл использовать медленный скроллинг (прокрутку) документа. Не для всех сайтов это подойдёт, но в некоторых случаях это выглядит довольно эффектно.

Реализовать такую прокрутку страницы можно с помощью JavaScript, а точнее, с помощью метода scrollBy() объекта window. Вызов функции скроллинга будет происходить из событийного атрибута onclick элемента, представляющего собой кнопку.

Пример одного из вариантов JavaScript-кода для медленной прокрутки содержимого:

<script>
   // Функция прокрутки страницы к началу
   // (вызывается после клика по кнопке "Наверх")
   var scrollToStart = function() {
      if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
         // Если не достигнута верхняя граница страницы,
         // прокручиваем страницу вверх на 200 px
         window.scrollBy(0,-200);
         setTimeout(scrollToStart, 5); // повторный вызов функции через 5 ms
      }
   }

   // Функция показа/скрытия кнопки "Наверх"
   window.onscroll = function() {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop;
      if (scrolled > 550) {
         // Если страница прокручена вниз более, чем на 550 пикселей,
         // выводим кнопку на экран
         document.getElementById('arrow').style.display = 'block';
      } else {
         // В противном случае убираем кнопку с экрана
         document.getElementById('arrow').style.display = 'none';
      }
   }
</script>

Поскольку прокрутка страницы вверх будет осуществляться программно, удаляем из HTML-кода лишнюю ссылку и якорь. В стилях же следует переопределить вид курсора, который курсор будет принимать при наведении на рисунок кнопки. Стандартным значением для кнопок и ссылок является вид pointer ().

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      .floating-button {
         position: fixed;  /* фиксируем позицию */
         top: 20px;        /* расстояние от верхней границы экрана */
         right: 20px;      /* расстояние от правой границы экрана */
      }

      #arrow {
         display: none;    /* скрываем рисунок до нужного момента */
         cursor: pointer;  /* задаем вид курсора */
      }
   </style>
</head>
<body>

   . . .

   <div class="floating-button">
      <img src="files/button.gif" width="40" height="40" alt="" id="arrow"
           title="К началу страницы" onclick="scrollToStart(); return false;">
   </div>
   <script>
      // Функция прокрутки страницы к началу
      // (вызывается после клика по кнопке "Наверх")
      var scrollToStart = function() {
         if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
            // Если не достигнута верхняя граница страницы,
            // прокручиваем страницу вверх на 200 px
            window.scrollBy(0,-200);
            setTimeout(scrollToStart, 5); // повторный вызов функции через 5 ms
         }
      }

      // Функция показа/скрытия кнопки "Наверх"
      window.onscroll = function() {
         var scrolled = window.pageYOffset || document.documentElement.scrollTop;
         if (scrolled > 550) {
            // Если страница прокручена вниз более, чем на 550 пикселей,
            // выводим кнопку на экран
            document.getElementById('arrow').style.display = 'block';
         } else {
            // В противном случае убираем кнопку с экрана
            document.getElementById('arrow').style.display = 'none';
         }
      }
   </script>
</body>
</html>

Изменяя второй аргумент метода scrollBy(), можно увеличить или уменьшить скорость прокрутки страницы. Однако не следует делать скроллинг слишком медленным, так как у пользователя может лопнуть терпение, и он, не дождавшись окончания прокрутки, просто закроет вкладку.

Примечание: Если в сценариях на странице планируется использовать функции из библиотеки jQuery, то вышеприведённый исходный JavaScript-код можно заменить следующим:

<!-- Загружаем библиотеку jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Сценарии для кнопки "Наверх" -->
<script>
   $(document).ready(function(){
      $(window).scroll(function() {
         if($(window).scrollTop() > 550) {
            // показываем элемент, если прокручено вниз
            // более, чем на 550 px
            $('#arrow').show();
         } else {
            // иначе делаем элемент скрытым
            $('#arrow').hide();
         }
      });

      $('#arrow').click(function() {
         // при клике прокручиваем страницу вверх
         $('body,html').animate({ scrollTop: 0 }, 400);
         return false;
      });
   });
</script>

Необходимость в событийном атрибуте onclick в теге <img> при этом отпадает, и его следует удалить.

Как создать кнопку с помощью средств CSS

Если под существующий дизайн страницы не удаётся подобрать подходящую рисованную кнопку, её можно попробовать создать с помощью средств CSS. Для этого в HTML-коде следует заменить тег <img> (рисунок кнопки) подходящей текстовой строкой, например, следующего содержания:

<body>
   <div id="top-page">
      . . .
   </div>

   . . .

   <div class="floating-button">
      <a id="arrow" href="#top-page">&#8657; Вверх</a>
   </div>
</body>

Чтобы данная текстовая ссылка приняла вид кнопки, в таблице стилей указываем для неё цвет текста, цвет фона и параметры рамки:

.floating-button {
   position: fixed;  /* фиксируем позицию */
   top: 20px;        /* расстояние от верхней границы экрана */
   right: 20px;      /* расстояние от правой границы экрана */
}

#arrow	{
   display: none;    /* скрываем кнопку до нужного момента */
   padding: 9px 15px 4px;       /* размер кнопки */
   color: #000000;              /* цвет надписи */
   background: #b0e4ee;         /* цвет фона */
   border: 1px solid #767676;   /* параметры рамки */
   border-radius: 3px;          /* скругляем углы */
   text-decoration: none;       /* убираем стандартное подчеркивание */
   font: 12pt sans-serif;       /* параметры шрифта */
}

Теперь, если весь этот код вместе со скриптами разместить в одном файле, выглядеть это будет следующим образом:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      .floating-button {
         position: fixed;     /* фиксируем позицию */
         top: 20px;           /* расстояние от верхней границы экрана */
         right: 20px;         /* расстояние от правой границы экрана */
      }

      #arrow	{
         display: none;    /* скрываем кнопку до нужного момента */
         padding: 9px 15px 4px;       /* размер кнопки */
         color: #000000;              /* цвет надписи */
         background: #b0e4ee;         /* цвет фона */
         border: 1px solid #767676;   /* параметры рамки */
         border-radius: 3px;          /* скругляем углы */
         text-decoration: none;       /* убираем стандартное подчеркивание */
         font: 12pt sans-serif;       /* параметры шрифта */
      }
   </style>
</head>
<body>
   <div id="top-page">
      . . .
   </div>

   . . .

   <div class="floating-button">
      <a id="arrow" href="#top-page">&#8657; Вверх</a>
   </div>
   <script>
      window.onscroll = function() {
         var scrolled = window.pageYOffset || document.documentElement.scrollTop;
         if (scrolled > 550) {
            // Если страница прокручена вниз более, чем на 550 пикселей,
            // выводим кнопку на экран
            document.getElementById('arrow').style.display = 'block';
         } else {
            // В противном случае убираем кнопку с экрана
            document.getElementById('arrow').style.display = 'none';
         }
      }
   </script>
</body>
</html>

А так это будет выглядеть в браузере:

Результат в браузере

Другие статьи по схожей тематике