WordPress как на ладони
Наставник Трепачёв Д.П., phphtml.net wordpress jino

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

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

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

  • Работает во всех браузерах;
  • Пропадает вверху экрана;
  • Можно добавлять на любые сайты, не только 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://site.ru/путь_до_файла.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://site.ru/путь_до_файла.png) 0 0 no-repeat;\
		}\
		.scrollTop:hover{ background-position:0 -76px;}\
	</style>');

Вместо http://site.ru/путь_до_файла.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;
}

Продвижение сайта www.seop.ru

продвижение сайта www.seop.ru

www.seop.ru

Кнопка «Наверх» с плавным прокручиванием 211 комментариев
Полезные 6 Вопросы 1 Все
  • seoonly.ru cайт: seoonly.ru

    Спасибо, то что нужно-)

    Ответить2.1 года назад #
  • Rezo
    @

    День добрый!
    А как бы добавить в этот же код прокручивание вниз, до якоря или же до секции? Есть такой вариант?

    Заранее мерси

    Ответить2.1 года назад #
    1
  • Все классно smile , жаль что эта страница не на первых местах в выдаче.

    Ответить1.8 года назад #
    1
  • Игор

    Кнопка на моем сайте работает на выше написанном ява-скрипте. Все замечательно!
    А еще навигация, карта и еще что-то smile

    Ответить1.7 года назад #
  • Юра cайт: fasad-sm.ru/uteplenie_doma

    Спасибо, забрал) smile

    Ответить1.5 года назад #
  • Сергей cайт: wp-text.com

    Наверное сейчас такие кнопки уже не актуальны. Чем меньше информации на странице, тем это лучше. Информация должна быть краткой и по существу. Растягивать страницу на два-три экрана вниз - это лишнее. Люди куда охотней смотрят видео, к примеру мастер-класс, чем пытаются в куче текста найти том что им нужно.

    Ответить1.3 года назад #
    1
    • Kama4452

      ИМХО. Всегда актуальны и будут актуальны, может не совсем такие, но НАВЕРХ. Видео и текст это разные виды информации и я думаю у больше половины населения нет такого интернета, чтобы видео смотреть. К тому же в середине видео искать какой-то кусок нужной информации сложнее чем в тексте...

      Дофигище того, что люди делают над своими сайтами без реальной пользы сайту - всякие анимации да препарации, просто потому что так хочется, вот и кнопка, может кому то душу греет. Ну, а я на этом сайте ею пользуюсь постоянно - мне нужно smile

      Но вы не ставьте такую кнопку, если считаете это не нужным. К чему ваш комментарий я не понял, мне статью удалить что ли?

      Ответить1.3 года назад #
      2
      • Вадим

        Сделал тот вариант где без background ,все четко.Текстовая информация тоже нужна на странице. Спасибо за статью.

        Ответить1.3 года назад #
  • Андрей cайт: sobcom.ru

    Установил у себя на сайте вариант на чистом JavaScrip, но он не работает на смартфонах sad . Можно ли исправить?

    Ответить1.2 года назад #
  • Андрей cайт: bcffs.ru

    Здравствуйте! Я теперь из-за этих действий вообще на сайт не могу попасть

    Ответить1.2 года назад #
  • Плохой код, когда прокручиваешь страницу стрелка моргает. И не понятно зачем ссылка, если если это кнопка.

    Ответитьгод назад #
    -1
    • Kama4452

      когда прокручиваешь страницу стрелка моргает

      Это у вас какие-то глюки на сайте, текущий код такое не делает... Попробуйте заменить название класса.

      И не понятно зачем ссылка, если если это кнопка

      Потому что ссылка может работать вообще без скрипта - это если вдруг скрипт глюкнет или еще что-то, почему нет то? И еще у ссылки при наведении уже стоит cursor:pointer не надо лишних стилей писать. И в конце концов - это ссылка - #, а не кнопка...

      Плохой код

      А какой хороший. дайте ссылку или напишите сюда его...

      Ответитьгод назад #
  • Жора

    Здравствуйте, а нельзя ли вас попросить объяснить почему каждый класс отделяется слэшами от следующего? Это синтаксис такой? Я только взялся за jquery, опыта нет. а про эти слэши нигде не нашел прочитать(((

    .append('\
    		.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:"▴"; /* ▲ ▴ △ ▵ ⏫ ⏶ ⧋ */ }\
    	');
    • Kama4452

      Это перенос строки экранируется, чтобы строка не ломалась... В JS коде в строке не может быть переносов - перенос это уже другая часть кода как бы... JS странный язык...

Здравствуйте, !

Ваш комментарий