БАЗА подписчиков за 1 месяц! (Секретная технология)minimazer

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


кнопка наверх для блога

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

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

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

Вот краткое содержание:


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

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

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

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

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

кнопка наверх у меня на блоге

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

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

к оглавлению ↑

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

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

Читайте также:  Favicon: Как его сделать и как установить его на сайт, блог?

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

/**
 * Скрипт Скроллинга: Кнопка наверх от 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 >  || y > ) {
		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 : ;
 
	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);
}

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

Читайте также:  А на что вы пойдете чтобы скрыть партнерскую ссылку?

кнопка вверх руками

Кстати, чтобы изменить скорость прокрутки — тебе нужно будет изменять число в 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">$(document).ready(function(){
        $(window).scroll(function () {if ($(this).scrollTop() > ) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
        $('#scroller').click(function () {$('body,html').animate({scrollTop: }, 400); return false;});
      });</script>

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

      <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

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

      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.

      кнопка наверх как вконтакте

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

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

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

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

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

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

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

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

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

      Читайте также:  Что такое блоггинг и как на нем зарабатывать

Понравилась статья? Расскажи друзьям:


Мой подарок подписчикам

Подписывайтесь на новости блога и получите подарок - книгу "Как заработать 1000$ в первый месяц". В ней я рассказал свои наблюдения исходя из своего опыта. Я выделил всего ТРИ метода для заработка.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

по хронологии
по рейтингу сначала новые по хронологии

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

Екатерина Худякова

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

Автор

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

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

Автор

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

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

Не нравится мне такая мода, пол статьи на главной странице показывать, дело вкуса, конечно.))

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

Автор

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

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

Я сегодня все методики попробую, по очереди по твоей статье.

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

Автор

Посмотрел, Диана, блог - вроде кнопка ВВЕРХ работает, но слева есть кусок кода, который мне не очень нравится :)

https://yadi.sk/i/u8J76uWCdH9oH

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

Автор

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

А мне нравится моя кнопка "ВВерх"

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

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

Автор

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

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