8 (800) 500-54-06
Создать сайт
Создать сайт
ГлавнаяБлогСерёжа Сыроежкин
Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
10.06.2015

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

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

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.

Кнопка наверх: HTML+CSS

Преимущество данного способа - простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку '#', а затем оформить её так, как нам нужно:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка наверх с помощью CSS - "Нубекс"</title>
  <style>
  .topNubex {
	position: fixed;
	right: 45px;
	bottom: 45px;
   }
  </style>
 </head>
 <body>
   <div style="height:3000px"></div>
   <a href="#" title="Вернуться к началу страницы" class="topNubex">Вверх</a>
 </body>
</html>

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка "Вверх" при помощи JavaScript - "Нубекс"</title>
  
  <style>
  #topNubex {
	position: fixed;
	right: 45px;
	bottom: 45px;
   }
  </style>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
  <script type="text/javascript">
  $(function() {
  $(window).scroll(function() {
  if($(this).scrollTop() != 0) {
  $('#topNubex').fadeIn();
  } else {
  $('#topNubex').fadeOut();
  }
  });
  $('#topNubex').click(function() {
  $('body,html').animate({scrollTop:0},700);
  });
  });
  </script>
 </head>
 <body>
   
   <div style="height:3000px"></div>
   
   <div id="topNubex"><img src="topNubex.png" width="30px" height="30px" /></div>
 </body>
</html>

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.

Смотрите также: