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

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

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

• Работает во всех браузерах;
• Пропадает вверху экрана;
• Можно добавлять на любые сайты, не только 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 пикселей:

Если у вас другая картинка, то в параметре 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>');

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

Вариант 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; }

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

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

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

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