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 Все
  • Роман jblog-project.ru

    отлично работает, спасибо за информацию!

    Ответить17.Авг.2014 в 19:51 #
  • Марина gazeta2x2.ru

    Спасибо большое и огромное! Все работает. Просто скопировала все по инструкции. good

    Ответить01.Окт.2014 в 13:37 #
  • Егор listelly.ru

    Спасибо за скрипт, взял без jQuery.
    Влом было копаться и самому писать, да и на поиски тоже не стоит.
    Одно условие остается дописать - если после нажатия на кнопку произвели скроллинг, или еще один щелчок мышкой - надо останавливать работу скрипта, а то он, пока до самого верха не доедет, не дает снова вниз скроллить. Если мне, например, нужна середина простыни - я щелкаю внизу на кнопку и при пролете нужного места, начинаю скроллить, чтобы поймать нужное место, но скрипт не дает остановиться - тянет вверх все равно!

    1
    Ответить14.Окт.2014 в 01:35 #
  • Спринтер zakaz-mikroavtobusa.com.ua/sto-remont-mi...

    Не силен к кодах, но все понятно и доступно, кроме того куда вставлять код в WordPress. Остальное понятно.

    Код кнопки размещать в файл functions.php?

    Ответить25.Дек.2014 в 15:29 #
    • Kama7682

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

      Ответить26.Дек.2014 в 01:20 #
  • Сергей series-all.ru

    Отлично все работает спс автору!
    на заметку

    С начала испытал вариант 1. с подключим jQuery - работает < но, при скролинге страница начинала тормозить когда появляется стрелка "на верх" .

    1. вариант - отлично подошел! Гладко появляется и поднимается. Я доволен.

    = еще =

    Поставил Перенаправление на случайную запись установил по инструкции. Без нареканий прошла тест, пока что думаю куда поставить кнопку)

    Ответить23.Янв.2015 в 22:29 #
  • Aamonorias

    А почему бы вместо картинок не использовать Font Awesome?

    Ответить10.Фев.2015 в 04:22 #
    • Kama7682

      Потому что так картинка весит 20кб, а Font Awesome грузит пол метра (500кб) Он огромен, и если его иконки юзаются по всему сайту, то есть смысл его ставить, да и то, я себе его не ставлю, есть более изящные решения, а это комбайн, хотя не спорю очень удобный!

      Ответить10.Фев.2015 в 23:03 #
  • Татьяна

    Благодарю!!! Кнопочки супер! Все работает отлично thank_you

    Ответить12.Фев.2015 в 04:01 #
  • lazy travelr.info

    Использовал вариант на чистом JavaScript. При наведении на стрелку вторая картинка (hover) как бы выплывает снизу, а не меняется моментально как в Вашем примере. Что нужно поменять в коде, чтобы было также как у Вас?

    1
    Ответить13.Фев.2015 в 20:05 #
    • Kama7682

      Вам нужно стили подстроить под картинку, в конце статьи есть:

      Для каждой картинки нужно изменить стили CSS:

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

        Размеры я подогнал сразу же, оказывается в моем шаблоне использовались эффекты перехода transition. Я задал для стилей .scrollTop и .scrollTop:hover свойство transition: 0s; и смена спрайта стала происходить мгновенно и без скроллинга. Спасибо за скрипт!

        2
        Ответить14.Фев.2015 в 00:10 #
  • @ Олег alcoformer.ru

    Спасибо Вам! Первый код, который я установил и сайт не пошел в разнос. Воспользовался вариантом на чистом JavaScript и Вашими картинками. Получилось то, что я и хотел! good

    Ответить27.Мар.2015 в 14:29 #
  • Ирина darlingdog.ru

    Спасибо, давно искала как поставить такую кнопку на свой сайт. В теме моего блога простая кнопка в footer Теперь попробую сделать более интересный вариант.

    Ответить17.Апр.2015 в 22:19 #