Кнопка «Вверх» с плавной прокруткой страницы на jQuery

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

Дизайн и CSS

Зайдите в редактирование основного шаблона (index.php) и в любое место вставьте следующий код на языке html:

1
2
3
<p id="back-top">
	<a href="#top"><span></span>Вверх</a>
</p>


В теге span у нас будет содержаться иконка стрелки.

В CSS-файл шаблона вставьте следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#back-top {
	position: fixed;
	bottom: 30px; /* отступ кнопки снизу */
	margin-left: -150px; /* отступ кнопки слева (для указания отступа справа 
используйте margin-right) */
}
 
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
 
/* иконка стрелки (тег span) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center; 
	/* в скобках указываем путь к иконке */
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	/* скругленные углы  */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
 
}
#back-top a:hover span {
	background-color: #777;
}

И на данном этапе это будет выглядеть примерно так (пока без плавной прокрутки).

jQuery

Для реализации плавной прокрутки мы будем использовать jQuery

Ниже приведен JavaScript-код, который вставьте в шаблон заголовка (header.php) перед закрывающимся тегом head. Данный код сначала скрывает элемент с id=»back-top», а затем проверяет, если полоса прокрутки расположена ниже 100px от верха экрана (scrollTop), то элемент появляется. А далее, по клику на ссылку, устанавнивает значение scrollTop на 0.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
 
	// hide #back-top first
	$("#back-top").hide();
 
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
 
		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
 
});
</script>

На этом всё, делайте свои сайты удобными и интересными! Happy coding!

Скачать исходники
Оригинальная статья

  • Интересный подход , надо попробовать. Спасибо за код.
    Вижу яндекс тебя тоже не жалует?

  • Aleks, ага( под фильтр попал. Видимо из-за ggl.

  • true-coder, скорее сайт просто вылетел из индекса из-за длительного отсутствия в сети.. (проблемы с хостером?!)
    Я думаю тебе стоит написать Платону, и почему-то я уверен что он напишет: «В течении 2-3 выдач, ваш сайт полностью вернется в выдачу»

    Так что не сцы 🙂 Не пришло время принимать какие нибудь решения..

  • tom0rrow, да не, не в этом дело. Первый раз писал им, спрашивал, в чем дело. В ответе скинули ссылки, по которым описывается, какие сайты они считат хорошими. Потом снова им написал, спросил, под какой именно фильтр попал, сказали, что просто временно ограничили сайт, мол, пишите статьи, развивайте сайт для людей и т.д., так что врятле это из-за хостинга…

  • ееемм, так а в чем проблема именно со стороны человечности?!
    Как по мне то очень качественный блог, с определенно интересными материалами.

    Хотя если посмотреть, то копипаста и рерайта хватает), не ставь источников, а исходники созраняй к себе на хостинг…

    Наверное нужно быть немного понаглее чтобы носится по просторам интернета свободно…

    Вот посмотри сайт: http://proger-rus.tk/?page_id=2, все статьи с моего блога в тупую копирует и вставляет, ну не лох?!
    Вот я могу воровать контент, а что они творят мне непонятно. Хотя это ошибра каждого начинающего…

  • tom0rrow, я ж говорю, по ходу именно из-за того, что слишком рано начал продавать ссылки на GetGoodLinks (в том числе нетематические). Блог слишком молодой для рекламы вообще, вот и вляпался.

    А копипаста или рерайта на блоге нет. Либо свои мысли, либо перевод с английского, там что с этим, думаю, всё в порядке. Единственное, что код в статьях, говорят, нужно брать в noindex. Нужно будет как-нибудь уделить этому время.

    А не ставить ссылки на оригинальные статьи — хз, совесть не позволит, наверное 🙂

  • Всё сделала по инструкции, только изменила цвета и размеры. Спасибо! очень нравится кнопка.
    Но вот в Мозиле всё никак не хочет работать. Кнопка отображается, но при нажатии на неё переход не происходит.

    В чем может быть проблема? Подскажите, пожалуйста.

    Заранее спасибо!

  • Tatiana, попробуйте еще раз внимательно всё скопировать, всё должно работать.

  • я и копировала, несколько раз без изменений и вручную всё проверяла… что-то никак…

  • Tatiana, css и html с этой статьи на вашем сайте я нашёл, а вот javascript’a (третий листинг) не увидел. Возможно, вы скопировали его php-файл не используемый при генерации странички.

  • Антон Кургузенков, вроде бы исправила, но всё равно не работает в Мозиле, проверьте пожалуйста.

    Р.С. спасибо за помощь!

  • Татьяна, js-код по прежнему отсутвует. Попробуйте вставить его в уже подключаемые на главной странице js-файлы. Когда всё работает как надо, кнопка не видна, когда находишся вверху страницы. Она должно появлятся при прокрутке вниз.

  • Антон Кургузенков, спасибо огромное за рекомендации! всё получилось!!! Заработало.

  • Спс, все получилось с первого раза. Еще добавил плавный подъем — просто сказка.

  • Спасибо. Поставлю себе на форум и сайт.

  • Спасибо, за статью. Но стрелка ИМХО далеко не самая удачная. Мой вариант стрелки, JS и CSS:
    — также появляется (настройка момента)
    — также подсвечивается
    — также плавно вверх (настройка скорости)
    — JS одним файлом, грузится на свой сервер (зачем тянуть с другого?)
    http://new-wp.net/51

  • Андрей

    Отличное решение! А про плагин для Google Chrome Вы что-нибудь слышали? Я с не давних пор пользуюсь им на всех сайтах!

    https://chrome.google.com/webstore/detail/pdlafijedddmcijlebhjbajifgcajfjp?hl=ru

    P.s. Он без кнопок! 🙂

  • Ребят я создал свою иконку , как мне её добавить туда в место старой?

  • Dandy, в строке css

    background: #ddd url(up-arrow.png) no-repeat center center;

    укажите ссылку на ваше изображение и укажите его размер:

    width: 108px;
    height: 108px;

  • Спасибо тебе огромное, очень благодарен!

  • у меня вот такая проблемка сделал плавную прокрутку и у меня не открывается скрипт перезвони мне в чем может быть проблемка кто может подсказать, зарание спасибо вот сайт okonnymir.ru

    ИСХОДНИК СКРИПТА «ПЕРЕЗВОНИ МНЕ»

    Заказать обратный звонок

    Ваше имя

    Телефон

    Вопрос или комментарий

    и извините что если не в тему, но очень хочется с плавной прокруткой!

  • у меня вот такая проблемка сделал плавную прокрутку и у меня не открывается скрипт перезвони мне в чем может быть проблемка кто может подсказать, зарание спасибо вот сайт okonnymir.ru

    ИСХОДНИК СКРИПТА "ПЕРЕЗВОНИ МНЕ"

    Заказать обратный звонок

    Ваше имя

    Телефон

    Вопрос или комментарий

    и извините что если не в тему, но очень хочется с плавной прокруткой!

  • Добрый день У меня такая проблема Если я вставляю в index,php скрипт

    Вверх
    </p

    то у меня пропадает слайдбар

  • Добрый день, еще раз вроде разобрался Но теперь стрелка бесцветная

  • Александр, проверьте путь к файлу с изображением.

  • Да , большое спасибо Все работает Только еще проблемма Поставил стрелку на другой сайт, но она сидит в самом низу и не появляется и не исчезает, но работает, те двигает страницу вверх Я вставил первы

  • Да , большое спасибо, Вадим Все работает
    Только еще олна проблемма Поставил стрелку на другой сайт, но застряла где-то посередине и не пропадает и не исчезает, но работает http://www.na-dosyge.ru

  • Да и еще Очень странно Если меняю отступ от края на правый , то стрелка как вкопанная Но если оставляю margin-left 1000px то тогда уходит стрелка в право

  • Все спасибо Уже сам нашел

  • Влад

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

    • seroburo

      такая же история, Вадим Санько, в чем может быть причина?

  • Марк

    Вадим Санько, у меня такая ситуация: есть одностраничный сайт из двух фреймов: слева статичное меню(навигация), справа контент — много текста. Контент делится на разделы, меню — картинки-ссылки анимированные. Мне бы хотелось что бы при нажатии на кнопки меню фрейм с контентом плавно переходил в указанное место. Как это реализовать подскажите, пожалуйста.

  • Александр

    Спасибо за статью! Всё получилось!

  • Inna

    Спасибо, скрипт просто супер!!!

  • Привет! Очень хочу такую кнопочку на свой сайт. Жаль, что я не разбираюсь в этом. Сможешь мне помочь установить её?

  • Pacas

    Такая проблема — установил всё как есть, но при добавлении jQuery пропадает тулбар юкоза причем пропадает только из-за кверри. Что делать?

    • Pacas, попробуйте заменить js-код из последнего листинга (4-29 строки) на вот это:

      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      
      jQuery.noConflict();
      (function ($) {
      	$(document).ready(function(){
       
      	  // hide #back-top first
      	  $("#back-top").hide();
       
      	  // fade in #back-top
      	  $(function () {
      		$(window).scroll(function () {
      		  if ($(this).scrollTop() > 100) {
      			$('#back-top').fadeIn();
      		  } else {
      			$('#back-top').fadeOut();
      		  }
      		});
       
      		// scroll body to 0px on click
      		$('#back-top a').click(function () {
      		  $('body,html').animate({
      			scrollTop: 0
      		  }, 800);
      		  return false;
      		});
      	  });
       
      	});
      }) (jQuery);

      Возможно, jQuery просто конфликтует с другой библиотекой, например, с Prototype, которая тоже используется на юкозе.

      • Pacas

        Спасибо, помогло!

  • Пока не опубликовано заметил, что система не сохранила код для вставки. Отредактировать свой пост не могу, а толку от сообщения без главного? Вот код. . Вместо левой стороны, можно выставить где угодно. Очень надеюсь, что на этот раз всё сохранится.

    • Александр, для вставки кода используйте теги, которые можно вставить, используя кнопки «html», «сss», «javascript» и т.д.

  • Спасибо, с первого раза заработало все идеально, немного уменьшил размер и все.

  • Алексей

    Доброго времени суток, Вадим!
    Ессно, спасибо за «просто и понятно», всё работает на «5».
    Но. Попытался сделать, чтобы кнопка вела не ВВЕРХ, а на Главную…
    Заменил (только лишь!!!)

    1
    2
    3
    4
    
    $('#back-top a').click(function () {
    $('body,html').animate({
    scrollTop: 0
    }, 800);

    на

    1
    2
    
    $('#back-top a').click(function () {
    $('location.href') = 'index.php';}

    Тоже заработало)) Но пропал эффект fade, т.е. стрелка (ссылка) ВСЕГДА на экране, сразу после загрузки страницы.
    В чём может быть дело? Хотя бы примерно…
    Спасибо.

  • С первого раза получилось!! Ура!

  • Михаил

    Хардкодим, забываем об ООП, плюем на инкапсуляцию.
    …и говнокоду нет предела

  • Думаю, что для обычного пользователя WordPress — плагины ставить гораздо проще и легче, но стоит позаморачиваться с кодом если Вы расчитываете на посещения сайта с мобильных устройств. Дело в том, что «мобильные» посетители заходят в основном с Ж/Д вокзалов, аэропортов, МакДональдсов и пр. то есть мест где есть инет по Wi-Fi. И как правило доступ очень медленный ввиду большого количества посетителей.
    Если Ваш сайт не загрузится у посетителя в течении 10-20 секунд, в 90% случаев он найдёт эту же информацию на другом, более быстром сайте.
    Делаем выводы.

  • Прошу помочь. Как убрать кнопку JQuery всамом низу страницы. Т.е. она появляется после 100пкс., а пропадает всамом низу, т.к в футере будет ссылка «наверх»

  • SanatoriyKurort

    очень круто.
    сперва делал как у ВК на сайте. Но попробовал этот вариант. Понравился намного больше.
    Целый вечер искал варианты как сделать приличную кнопку. Просмотрел очень много ресурсов и потратил около 5 часов реального времени.
    Остановился на этом варианте.
    ЦМСка Битрикс. Спасибо, все работает!