Делаем кнопку наверх для сайта

Разместил: Юрий | 02.12.2014
16 комментариев

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

Мне показалось это довольно удобным и я решил пообщаться с тобой на тему “как создать кнопку наверх для сайта”. А ты уже имеешь такую кнопку на блоге? Расскажи, как кнопка “Наверх” повлияла на тебя и твоих читателей. Ведь на самом деле это кнопка как кнопка – ничего сверхестественного в ней нет. Разве что она очень помогает тебе избавиться от прокрутки длинной ленты новостей.

Вот например у меня раньше было аж 12 постов на главной – представьте, сколько это нужно крутить. А сейчас еще стало модным пол статьи показывать на главной странице – так это вообще листать – не перелистать эту главную. Поэтому приходит на помощь кнопка “Наверх” – на неё нажал – и дома. :)

Вот краткое содержание:
Довольно практичное и удобное решение, как считаешь?

Скрипт кнопки «Наверх» для сайта на HTML и jQuerry.

Чтобы кнопка «Наверх» появилась и начала работать на твоем блоге, вставь следующий код в файл footer.php твоего шаблона перед закрывающимся тегом <body>.

<script type="text/javascript">// <![CDATA[ jQuery(document).ready(function($){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: }, 400); return false;});
});
// ]]></script>
наверх

После этого на твоём блоге появится надпись Наверх, которая внешне не будет похоже на кнопку. Но это легко устранить, если прописать стили для дива «scroller» в файле style.css.

кнопка наверх у меня на блоге
Я еще буду в будущем писать о том, как править CSSи т.п. вещи, поэтому рекомендую подписаться чтобы не пропустить ничего интересного. Ну и конечно — надо бы стилизовать как-то твою новую кнопку.

Если у тебя нет ни навыков ни понимания того что нужно делать — обращайся ко мне — чем могу помогу.

Еще один способ как установить кнопку Наверх без плагина.

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

Скрипт сам достаточно длинный, поэтому, наберитесь терпения на изучение.

/**
 * Скрипт Скроллинга: Кнопка наверх от in4wp
 * 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 = ;
	var dy = ;
	var bx = ;
	var by = ;
	var wx = ;
	var wy = ;
 
	if (document.documentElement) {
		dx = document.documentElement.scrollLeft || ;
		dy = document.documentElement.scrollTop || ;
	}
	if (document.body) {
		bx = document.body.scrollLeft || ;
		by = document.body.scrollTop || ;
	}
	var wx = window.scrollX || ;
	var wy = window.scrollY || ;
 
	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 &gt;  || y &gt; ) {
		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 &gt; 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 : ;
 
	clearTimeout( window['top'].timeout );
 
	window['top'].timeout = setTimeout(slowopacity, 30);
 
	function slowopacity(){
		if( startop &lt; endop ){
			op += 5;
			if( op &lt; endop ) window['top'].timeout = setTimeout(slowopacity, speed); else (endFunc) &amp;&amp; endFunc(); } else { op -= 5; if( op &gt; endop ){
				window['top'].timeout = setTimeout(slowopacity, speed);
			}
			else
				(endFunc) &amp;&amp; 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);
}
Читайте также:  ШОК!! +350 посетителей за 1 сутки! Как??
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 &gt; 0 || y &gt; 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 &gt; 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 &lt; endop ){ op += 5; if( op &lt; endop ) window['top'].timeout = setTimeout(slowopacity, speed); else (endFunc) &amp;&amp; endFunc(); } else { op -= 5; if( op &gt; endop ){ window['top'].timeout = setTimeout(slowopacity, speed); } else (endFunc) &amp;&amp; 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); }

Если это то что ты ищешь — вот ссылка на скачивание — берите, пользуйтесь. Вот как это выглядело у меня:

кнопка вверх руками
Кстати, чтобы изменить скорость прокрутки — тебе нужно будет изменять число в 9ой строке.

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

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

Конечно, этот скрипт тоже надо будет подключить в вашем файле header.php. Да, блин, как-то поспешил я заканчивать эту часть.

В общем, давай следовать этим пунктам:

    • Скачиваем скрипт от сюда
    • Загружаем его к себе на хостинг
    • Открываем файл header.php в вашем шаблоне
    • Вставляем туда (в блок <head>) следующий код:
      <script src="полный путь до скрипта" type="text/javascript"></script>

Вот и все, должно заработать.

И еще один способ установки кнопки Наверх.

Для начала подключай следующий скрипт перед закрывающим тегом </head>.

<script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
  $('#scroller').click(function () {$('body,html').animate({scrollTop: }, 400); return false;});
});
// ]]></script>
Читайте также:  Как сделать оглавление (содержание) для статьи блога

Следующий перед закрывающим </body>

 

Осталось только Добавить стили:

b-top {
  z-index:2600;position:fixed;left:;
  bottom:70px;width:35%;margin-left:50%;
  opacity:0.5;filter:alpha(opacity=50);
}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {
  z-index:2600;position:absolute; display:block;
  left:56px;bottom:;margin:   100%;padding:32px 12px 4px;
  color:white;border-radius:7px;
  background:#888 url(img/b-top.png) no-repeat 50% 11px;
}

И не забудь закачать картинку со стрелкой. Потому что без картинки будет просто появляться серый блок. Ну поставь — сам увидишь.

Кнопка наверх при помощи плагина

Теперь информация для самых важных читателей — для тебя, новичоК! Поговорим о том, как сделать кнопку «вверх» при помощи плагина.

Этот способ подойдет тем, кто не любит или не умеет или боится возиться с кодом шаблона.

Плагин для кнопки наверх называется Scroll To TOPСкачать ПЛАГИН.

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

После обновления страницы на блоге появится специальная кнопка. Вот такая:

кнопка наверх на блоге
Кстати, внутри папки с плагином находятся всего два файла. Это файл scrolltotop.php и файл с изображением стрелки up.png, последний находится в папке image. Эту стрелку можно так же изменить.

Можно нарисовать самому, а можно воспользоваться готовой коллекцией.

Кнопка наверх как Вконтакте.

Этот простейший скрипт (скачать скрипт) нужно поместить в файл functions.php.

кнопка наверх как вконтакте
На скрине видно что каждая строчка этого скрипта прокомментирована и справится с ней сможет даже новичок. Нужно просто установить и все. Все заработало сразу же!

Один момент нужно все-таки помнить — путь к картинке нужно учитывать всегда. И проверять его актуальность при вставке левого кода.

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

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

На самом деле есть и другие варианты установки этой кнопки, но я старался дать тебе самые доступные. Если возникнут вопросы – задавай. Хотя эта тема довольно простая и я не думаю что вопросы будут возникать. Кстати, хочу услышать твоё мнение в комментариях, а чтобы не пропускать в ближайшее время обновления – [urlspan]подписывайтесь[/urlspan] на обновления блога.

В любом случае помни — если есть вопросы — не стесняйся.

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

На этом у меня все. Ну, как тебе статья? Жду каментов.

С Уважением, Тумилович Денис.

16 комментариев

  1. Сергей

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

    Ответить
  2. Екатерина Худякова

    Кнопка «наверх» очень нужная, сама не люблю вручную листать очень длинные страницы))) Правда на своем блоге пока еще не установила ее, планирую попозже это сделать, когда с другими уже начатыми задачами расправлюсь))).

    Ответить
    1. Денис Тумилович

      Если с задачами какими-то будет проблема — обращайся :)

      Ответить
  3. Юрий Йосифович

    Каким плагином выводишь подсветку синтаксиса?

    Ответить
    1. Денис Тумилович

      Плагином — wp-syntax

      Ответить
  4. Дмитрий Смирнов

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

    Ответить
  5. Диана Ефимова

    Не нравится мне такая мода, пол статьи на главной странице показывать, дело вкуса, конечно.))
    Вот до сих пор никак руки не дойдут такую кнопочку сделать, я не просто стрелочкой хочу, а что-нибудь прикольное.) Увидела на одном блоге птичку что ли вместо стрелки. Прикольно смотрится.))

    Ответить
    1. Денис Тумилович

      Диана, есть и птички и ракеты и много чего еще. Для кнопки же любая картинка подойдет. Если нужна будет помощь — обращайтесь.

      Ответить
      1. Диана Ефимова

        Денис, я вчера пыталась кнопку поставить. Но ничего не вышло.( Она вообще не отображалась почему-то(( Даже плагином пыталась сделать, один фиг ничего не вышло. Кодом пыталась, тоже ноль результата. Что-то я не понимаю, в чем проблема.
        Я сегодня все методики попробую, по очереди по твоей статье.

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

        Ответить
        1. Денис Тумилович

          Посмотрел, Диана, блог — вроде кнопка ВВЕРХ работает, но слева есть кусок кода, который мне не очень нравится :)
          https://yadi.sk/i/u8J76uWCdH9oH

          Ответить
  6. Ильдар Тимербаев

    Ого, не знал, что столько способов есть. У меня как-то криво стоит скрипт.
    Денис, может подскажешь, что сделать?

    Ответить
    1. Денис Тумилович

      А в чем собственно кривизна заключается? Я попробовал — вроде работает.

      Ответить
  7. Азик

    А мне нравится моя кнопка «ВВерх»
    Она очень простая)) Я не помню, вроде скриптом прописывал)

    Ответить
  8. Наталья Погорелова

    А эта кнопка для прокрутки страницы вверх, устанавливается на какой именно движок? У меня есть сайт на движке WordPress, какую именно кнопку нужно будет ставить на него? Мне ТАМ она, эта кнопка, крайне необходима))) Или все вышеперечисленные становятся на все движки? Спасибо.

    Ответить
    1. Денис Тумилович

      Эта кнопка устанавливается в любой движок. Я в статье привел пример плагина для WordPress и набор скриптов, которые могут установить кнопку наверх абсолютно на любой сайт. Нужны только навыки работы с кодом. Если у вас таких нет — обращайтесь.

      Ответить
  9. Сергей Оксак

    Кнопка эта очень полезная, сам недавно поставил и постоянно пользуюсь, все устраивает. Правда, пошел по другому пути — через библиотеку jQuerry, но очень интересно было узнать и про другие варианты установки. Может быть, действительно стоит исправить. Вроде бы все просто и никаких подводных камней нет

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *