WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru WPmentor - Ищем топовых специалистов по WordPress, чтобы помочь вам заработать

Кнопка «Наверх» с плавным прокручиванием

Меня неоднократно просили в комментариях рассказать как реализована стрелочка «Наверх» на этом сайте. Делюсь.

Некоторые преимущества:

  • Работает во всех браузерах;
  • Пропадает вверху экрана;
  • Можно добавлять на любые сайты, не только WordPress.

Мы получим фиксировано расположенную кнопку, по нажатию на которую, экран будет передвигаться наверх плавно и стрелка будет исчезать в верху.

Ниже два варианта: на чистом JS и на jQuery. Код кнопки подойдет под любой движок, не обязательно WordPress - это может быть: Drupal, Bitrix, Joomla, DLE или UCOZ.

Вариант 1: Кнопки «наверх» на jQuery

ДЕМО: посмотреть как это выглядит >>>

1. Подключим jQuery

Для начала нам нужно подключить jQuery, если он еще не установлен на вашем сайте (такое бывает редко). Для этого скопируйте следующий код в файл темы functions.php:

add_action('wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

Если jQuery у вас уже подключен, то этот пункт можно пропустить.

2. Встроим .js код

Следующим шагом встроим код самой кнопки. Для этого создадим файл my_topbutton.js и вставим в него код ниже. Затем нужно этот файл подключить на страницу.

Или чтобы не возиться с файлом, можно просто скопировав этот код в какой-нибудь уже имеющийся .js файл.

Этот код должен подключаться после кода jQuery библиотеки.

jQuery(document).ready(function($){

	/**
	 * Кнопка наверх на jQuery. 
	 * Автор: Тимур Камаев - wp-kama.ru
	 * version 2.2
	 */
	$('body').append('<style>\
		.scrollTop{\
			display:none; z-index:9999; position:fixed; bottom:10px; left:48%; width:50px; height:70px;\
			background:url(http://example.com/путь_до_файла.png) 0 0 no-repeat;\
		}\
		.scrollTop:hover{ background-position:0 -76px;}\
	</style>');

	var speed      = 500,
		$scrollTop = $('<a href="#" class="scrollTop"></a>').appendTo('body');        

	$scrollTop.click(function(e){
		e.preventDefault();

		$( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
	});

	//появление
	function show_scrollTop(){
		( $(window).scrollTop() > 300 ) ? $scrollTop.stop().fadeIn(600) : $scrollTop.stop().fadeOut(600);
	}
	$(window).scroll( function(){ show_scrollTop(); } );
	show_scrollTop();

});
3. Настроим CSS стили

Во вставленном JS коде есть строки со CSS стилями:

    $('body').append('<style>\
		.scrollTop{\
			display:none; z-index:9999; position:fixed; bottom:10px; left:48%; width:50px; height:70px;\
			background:url(http://example.com/путь_до_файла.png) 0 0 no-repeat;\
		}\
		.scrollTop:hover{ background-position:0 -76px;}\
	</style>');

Вместо http://example.com/путь_до_файла.png  нужно указать путь до файла-картинки с изображением стрелок. Картинку нужно залить на сайт.

Также нужно изменить размеры под картинку: width:50px; height:70px; и background-position:0 -76px;. Эти размеры рассчитаны на картинку 50х140 пикселей:

arrows1

Если у вас другая картинка, то в параметре width:50px; укажите ширину картинки; в параметре height:70px; укажите половину высоты (высоту верхней части картинки); в параметре background-position:0 -76px; - на сколько пикселей отступить от верха картинки при наведении мыши на "кнопку". Для этой картинки -76px.

Все, готово!

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

#3.2 CSS стили без использования картинки - все еще проще!

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

    $('body').append('<style>\
		.scrollTop{\
			display:none; z-index:9999; position:fixed; bottom:0; padding:1em 2em; left:48%; border-radius:.2em;\
			background:rgba(0,0,0,0.2); color:#fff;\
		}\
		.scrollTop:hover{ background:rgba(0,0,0,0.6); color:#fff; text-decoration:none; }\
		.scrollTop:before{ content:"▴"; /* ▲ ▴ △ ▵ ⏫ ⏶ ⧋ */ }\
	</style>');

Замените аналогичные строки в код скрипта на эти и у вас получиться такая кнопка:

naverh-knopka-dlya-sajta

Вариант 2: Кнопки «Наверх» на чистом JavaScript

Посмотреть ДЕМО на чистом javascript >>>

Если на сайте нет jQuery, то нет смысла подключать достаточно объемный фреймворк, только для того, чтобы установить такую кнопку.

Для того, чтобы реализовать такую, плавно прокручивающуюся кнопку "наверх" без jQuery используйте такой js код:

/**
 * Скрипт скроллинга: кнопка наверх
 * css class кнопки: scrollTop
 */

window.top = {};
var sc = window.top;

sc.time = 12; // время прокручивания

sc.goTop = function (time, acceleration) {
	acceleration = acceleration || 0.1;
	time = time || sc.time;

	var dx = 0;
	var dy = 0;
	var bx = 0;
	var by = 0;
	var wx = 0;
	var wy = 0;

	if (document.documentElement) {
		dx = document.documentElement.scrollLeft || 0;
		dy = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		bx = document.body.scrollLeft || 0;
		by = document.body.scrollTop || 0;
	}
	var wx = window.scrollX || 0;
	var wy = window.scrollY || 0;

	var x = Math.max(wx, Math.max(bx, dx));
	var y = Math.max(wy, Math.max(by, dy));

	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
	if(x > 0 || y > 0) {
		var invokeFunction = "window.top.goTop("+ time +")"
		window.setTimeout(invokeFunction, time);
	}
	return false;
}

sc.showHide = function (){
	var a = document.getElementById('gotop');

	if( ! a ){
		// если нет элемента добавляем его
		var a = document.createElement('a');
		a.id = "gotop";
		a.className = "scrollTop";
		a.href = "#";
		a.style.display = "none";
		a.style.position = "fixed";
		a.style.zIndex = "9999";
		a.onclick = function(e){ e.preventDefault(); window.top.goTop(); }
		document.body.appendChild(a);
	}

	var stop = (document.body.scrollTop || document.documentElement.scrollTop);
	if( stop > 300 ){
		a.style.display = 'block';
		sc.smoothopaque(a, 'show', 30, false);
	} else {
		sc.smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';});
	}

	return false;
}

// Плавная смена прозрачности
sc.smoothopaque = function (el, todo, speed, endFunc){
	var 
	startop = Math.round( el.style.opacity * 100 ),
	op = startop,
	endop = (todo == 'show') ? 100 : 0;

	clearTimeout( window['top'].timeout );

	window['top'].timeout = setTimeout(slowopacity, 30);

	function slowopacity(){
		if( startop < endop ){
			op += 5;
			if( op < endop )
				window['top'].timeout = setTimeout(slowopacity, speed);
			else
				(endFunc) && endFunc();
		}
		else {
			op -= 5;
			if( op > endop ){
				window['top'].timeout = setTimeout(slowopacity, speed);
			}
			else
				(endFunc) && endFunc();
		}

		// установка opacity
		el.style.opacity = (op/100);
		el.style.filter = 'alpha(opacity=' + op + ')';
	}
}

if (window.addEventListener){
	window.addEventListener("scroll", sc.showHide, false);
	window.addEventListener("load", sc.showHide, false);
}
else if (window.attachEvent){
	window.attachEvent("onscroll", sc.showHide);
	window.attachEvent("onload", sc.showHide);
}

Сжатая версия кода

(function(){function b(){var a=document.getElementById("gotop");a||(a=document.createElement("a"),a.id="gotop",a.className="scrollTop",a.href="#",a.style.display="none",a.style.position="fixed",a.style.zIndex="9999",a.onclick=function(a){a.preventDefault();window.top.goTop()},document.body.appendChild(a));300<(document.body.scrollTop||document.documentElement.scrollTop)?(a.style.display="block",l(a,"show",30,!1)):l(a,"hide",30,function(){a.style.display="none"});return!1}function l(a,e,f,c){function k(){g<
h?(d+=5,d<h?window.top.timeout=setTimeout(k,f):c&&c()):(d-=5,d>h?window.top.timeout=setTimeout(k,f):c&&c());var e=a,b=d;e.style.opacity=b/100;e.style.filter="alpha(opacity="+b+")"}var g=Math.round(100*a.style.opacity),d=g,h="show"==e?100:0;clearTimeout(window.top.timeout);window.top.timeout=setTimeout(k,30)}window.addEventListener?(window.addEventListener("scroll",b,!1),window.addEventListener("load",b,!1)):window.attachEvent&&(window.attachEvent("onscroll",b),window.attachEvent("onload",b));window.top.goTop=
function(a,e){a=a||0.1;e=e||12;var f=0,c=0,b=0,g=0,d=0,h=0;document.documentElement&&(f=document.documentElement.scrollLeft||0,c=document.documentElement.scrollTop||0);document.body&&(b=document.body.scrollLeft||0,g=document.body.scrollTop||0);d=window.scrollX||0;h=window.scrollY||0;f=Math.max(d,Math.max(b,f));c=Math.max(h,Math.max(g,c));g=1+a;window.scrollTo(Math.floor(f/g),Math.floor(c/g));(0<f||0<c)&&window.setTimeout("top.goTop("+a+", "+e+")",e);return!1}})();

CSS стили нужно указать отдельно в файле стилей:

.scrollTop{
	background:url('путь_до_файла.png') 0 0 no-repeat;
	width:50px; height:70px;
	bottom:10px; left:48%;
}
.scrollTop:hover{ background-position:0 -76px; }

Картинки для кнопок

Посидел, набрал несколько картинок, которые возможно вам понравятся.

arrows1arrows15arrows18 arrows14 arrows12 arrows7arrows13arrows3arrows4 arrows6 arrows5arrows17 arrows8arrows10arrows11arrows16arrows2 arrows9

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

.scrollTop{
	background:url('путь_до_файла.png') 0 0 no-repeat;
	width:50px; /* изменяем: ширина картинки */
	height:70px; /* изменяем: высота кнопки - половина высоты картинки */
	bottom:10px;
	left:48%;
}
.scrollTop:hover{
	/* изменяем: отступ при наведении, 
	нужно подбирать вручную. Примерно равен высоте кнопки */
	background-position:0 -76px;
}
210 комментов
Полезные 6 Все
  • Александр-HIMиk www.alexzdesign.ru

    путь_до_фала/arrows2.png

    Исправляйтесь wink

    Ответить04.Мар.2011 в 15:48 #
  • Shikon shikonn.com

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

    Ответить04.Мар.2011 в 19:38 #
    • Kama7682

      Проверьте все еще раз. До тега <body> попробуйте поставить. Возможно скрипт конфликтует с чем-то, попробуйте его в разные места страницы повставлять.

      Ответить04.Мар.2011 в 21:48 #
  • armid

    Так же кнопка не работает. Правда я не на wordpress вставляю.

    Firebug пишет вот такую ошибку:

    jQuery is not defined
    [Прерывать на этой ошибке] })(jQuery)
    Ответить05.Мар.2011 в 19:18 #
    • Kama7682

      Не определен jQuery поэтому не работает. Подключите фреймворк, правильно. Тот вариант который я показал для подключения работает, только если есть доступ к инетрент, потому что подключение идет с гугла.

      Ответить05.Мар.2011 в 20:38 #
  • armid

    Разобрался. Оказалось, что подключение jQuery у меня по коду шло ПОСЛЕ подключения файла со скриптом.

    Спасибо за ваше ОЧЕНЬ ХОРОШЕЕ решение!

    Ответить05.Мар.2011 в 23:06 #
  • @ jakethomas

    Спасибо большое. Честно говоря - тоже при случае намеревался спросить у вас про эту заветную кнопку. sarcastic

    Ответить06.Мар.2011 в 03:16 #
  • Kama7682

    Всем пожалуйста!

    Ответить06.Мар.2011 в 11:07 #
  • Роман Лоевский radarskidok.ru

    Спасибо огромное за скрипт! Единственный кросс-браузерный скрипт, который мне удалось найти. Только подскажите пожалуйста, где ужно править, чтобы кнопка сдвинулась на 100px влево или вправо?

    Ответить06.Мар.2011 в 20:04 #
    • Kama7682

      В настройке стилей параметр left:47%; измените. Например, если написать left:100px;, то отступ будет на 100 пикселей слева.

      Ответить06.Мар.2011 в 22:19 #
  • Роман Лоевский radarskidok.ru

    Понял, спасибо!

    Ответить07.Мар.2011 в 13:03 #
  • @ virtual see.od.ua

    На чистом javascript после нажатия на кнопку прокручивание ближе к началу страницы замедляется и приятней смотрится, еще бы кнопка исчезала... wink

    Ответить08.Мар.2011 в 11:03 #
    • Kama7682

      Согласен. Я плохо знаю JavaScript, поэтому время тратить на написание исчезновения тратить не хочу. Если где-нить подобное решение попадется обязательно дополню пост.

      Ответить08.Мар.2011 в 12:14 #
  • @ virtual see.od.ua

    Я тоже, если придумаю что-нибудь.
    Кажется, проблема не в том, чтобы исчезла, а в том, чтобы потом опять появилась.

    Ответить08.Мар.2011 в 15:40 #