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 Все
  • Shtirlitz blogbankir.ru

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

    Ответить02.Фев.2014 в 07:59 #
  • Shtirlitz blogbankir.ru

    В общем, проще поставить плагин scroll to top button например, чем возиться с кодом

    Ответить04.Фев.2014 в 04:30 #
  • TMM

    Чётко! особенно подошел вариант на JavaScript! Спасибо автору!

    Ответить05.Мар.2014 в 15:57 #
  • Дмитрий qsoft.su

    Отличный вариант на jQuery, все работает как надо, но есть вопрос, есть ли возможность вместо файла картинки использовать просто текст? Если возможно подскажите как?

    Ответить07.Апр.2014 в 16:38 #
    • Kama7682

      Дописываете код скрипта:

      $scrollTop = $("<a/>")
      	.text('Наверх')
      	.addClass('scrollTop')
      	.attr({href:'#', style:'display:none; z-index:9999; position:fixed;'})
      	.appendTo('body');

      И изменяете css стили под себя (главное там удалить);

      background:url('путь_до_файла.png') 0 0 no-repeat;
      
      background-position:0 -76px;
      Ответить13.Апр.2014 в 13:14 #
  • @ p2p timebnk.ru

    спасиб, сделал себе ))
    все работает ))

    Ответить08.Апр.2014 в 16:56 #
  • Дмитрий qsoft.su

    огромное спасибо, это то что нужно было, все отлично работает

    Ответить14.Апр.2014 в 23:38 #
  • oleg

    поставил все как написанно, а кнопка не работает

    Ответить22.Апр.2014 в 19:13 #
    • Kama7682

      Что-то не так сделали, или скрипт конфликтует. Попробуйте другой вариант unknw

      Ответить28.Апр.2014 в 19:58 #
  • Сергей-1472

    Кам, а чё это за хрень:

    background: url('data:image/png;base64,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
    AENcQvRcrjtzAAAAAElFTkSuQmCC') no-repeat scroll

    shock

    Ответить18.Июн.2014 в 19:22 #
    • Kama7682

      Закодированная картинка стрелок, чтобы файла не было, прямо в коде. smile

      Ответить18.Июн.2014 в 21:58 #
    • Otshelnik-fm228 otshelnik-fm.ru

      Прочитайте про технологию base64 для кодирования картинок - позволяет сократить http запросы к серверу

      Ответить18.Июн.2014 в 22:19 #
  • dima

    не работает. все по инструкции делал unknw

    Ответить19.Июл.2014 в 07:12 #
    • Kama7682

      Видимо конфлик скрипта какой-то. Попробуйте другую инструкцию в сети она есть. unknw

      Ответить19.Июл.2014 в 17:15 #
  • Виталий

    Все отлично работает. Спасибо!
    В начале кода запятую, на точку с запятой нужно исправить

    Ответить21.Июл.2014 в 22:12 #
    • Kama7682

      Какую запятую? Где переменные? Там должна быть запятая как бы. С ней не работает что ли? shock

      Ответить23.Июл.2014 в 21:36 #