Всем привет, последнее время я много где вижу классную кнопку на блогах. Более того, сейчас многие шаблоны уже в стандартном своем варианте, без дополнительных настроек имеют эту кнопку, не всегда сразу заметную, но тем не менее…
Мне показалось это довольно удобным и я решил пообщаться с тобой на тему “как создать кнопку наверх для сайта”. А ты уже имеешь такую кнопку на блоге? Расскажи, как кнопка “Наверх” повлияла на тебя и твоих читателей. Ведь на самом деле это кнопка как кнопка – ничего сверхестественного в ней нет. Разве что она очень помогает тебе избавиться от прокрутки длинной ленты новостей.
Вот например у меня раньше было аж 12 постов на главной – представьте, сколько это нужно крутить. А сейчас еще стало модным пол статьи показывать на главной странице – так это вообще листать – не перелистать эту главную. Поэтому приходит на помощь кнопка “Наверх” – на неё нажал – и дома. :)
Вот краткое содержание:
Довольно практичное и удобное решение, как считаешь?
Скрипт кнопки «Наверх» для сайта на HTML и jQuerry.
Чтобы кнопка «Наверх» появилась и начала работать на твоем блоге, вставь следующий код в файл footer.php твоего шаблона перед закрывающимся тегом <body>.
После этого на твоём блоге появится надпись Наверх, которая внешне не будет похоже на кнопку. Но это легко устранить, если прописать стили для дива «scroller» в файле style.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 = 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);
}
Если это то что ты ищешь — вот ссылка на скачивание — берите, пользуйтесь. Вот как это выглядело у меня:
Если тебе лень будет настраивать стили и подгонять их как-то по приличней — можешь воспользоваться моими.
.scrollTop{
background:url('путь_до_файла.png') 0 0 no-repeat;
width:50px; /* изменяем: ширина картинки */
height:70px; /* изменяем: высота кнопки - половина высоты картинки */
bottom:10px;
left:48%;
}
.scrollTop:hover{
/* изменяем: отступ при наведении,
нужно подбирать вручную. Примерно равен высоте кнопки */
background-position:0 -76px;
}
Конечно, этот скрипт тоже надо будет подключить в вашем файле header.php. Да, блин, как-то поспешил я заканчивать эту часть.
В общем, давай следовать этим пунктам:
-
- Скачиваем скрипт от сюда
- Загружаем его к себе на хостинг
- Открываем файл header.php в вашем шаблоне
- Вставляем туда (в блок <head>) следующий код:
Вот и все, должно заработать.
И еще один способ установки кнопки Наверх.
Для начала подключай следующий скрипт перед закрывающим тегом </head>.
Следующий перед закрывающим </body>
Осталось только Добавить стили:
b-top {
z-index:2600;position:fixed;left:0;
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:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;border-radius:7px;
background:#888 url(img/b-top.png) no-repeat 50% 11px;
}
И не забудь закачать картинку со стрелкой. Потому что без картинки будет просто появляться серый блок. Ну поставь — сам увидишь.
Кнопка наверх при помощи плагина
Теперь информация для самых важных читателей — для тебя, новичоК! Поговорим о том, как сделать кнопку «вверх» при помощи плагина.
Этот способ подойдет тем, кто не любит или не умеет или боится возиться с кодом шаблона.
Плагин для кнопки наверх называется Scroll To TOP — Скачать ПЛАГИН.
Распакуешь содержимое архива, загрузишь плагин на хостинг в папку с плагинами и активируешь плагин. Тут все просто и пояснения излишни.
Ничего больше делать не нужно.
После обновления страницы на блоге появится специальная кнопка. Вот такая:
Можно нарисовать самому, а можно воспользоваться готовой коллекцией.
Кнопка наверх как Вконтакте.
Этот простейший скрипт (скачать скрипт) нужно поместить в файл functions.php.
Один момент нужно все-таки помнить — путь к картинке нужно учитывать всегда. И проверять его актуальность при вставке левого кода.
На самом деле это самый удобный способ установки кнопки вверх без плагинов, хотя бы потому что ты сам знаешь где и как выводится эта кнопка и что нужно изменить для того чтобы привести к нужному тебе виду. К тому же не нужно никаких библиотек подключать.
Вот и все кнопка наверх установлена. Теперь посетители тввоего блога будут тебе благодарны, за то что ты облегчаешь им навигацию на вашем сайте.
На самом деле есть и другие варианты установки этой кнопки, но я старался дать тебе самые доступные. Если возникнут вопросы – задавай. Хотя эта тема довольно простая и я не думаю что вопросы будут возникать. Кстати, хочу услышать твоё мнение в комментариях, а чтобы не пропускать в ближайшее время обновления – [urlspan]подписывайтесь[/urlspan] на обновления блога.
В любом случае помни — если есть вопросы — не стесняйся.
Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.
На этом у меня все. Ну, как тебе статья? Жду каментов.
С Уважением, Тумилович Денис.
По мне, так эта кнопка лишняя красивость на блоге. Поэтому у себя я ее не ставил. Справа все равно есть полоса прокрутки. А чтобы было удобно листать, сами страницы нужно делать не такими длинными. По возможности выводить меньше анонсов на главной, или создавать постраничную навигацию в нужных местах. Тогда удобно будет и кнопка наверх не понадобиться.
Кнопка «наверх» очень нужная, сама не люблю вручную листать очень длинные страницы))) Правда на своем блоге пока еще не установила ее, планирую попозже это сделать, когда с другими уже начатыми задачами расправлюсь))).
Если с задачами какими-то будет проблема — обращайся :)
Каким плагином выводишь подсветку синтаксиса?
Плагином — wp-syntax
Конечно нужно тоже стараться все делать без плагинов, при помощи кода.
Не нравится мне такая мода, пол статьи на главной странице показывать, дело вкуса, конечно.))
Вот до сих пор никак руки не дойдут такую кнопочку сделать, я не просто стрелочкой хочу, а что-нибудь прикольное.) Увидела на одном блоге птичку что ли вместо стрелки. Прикольно смотрится.))
Диана, есть и птички и ракеты и много чего еще. Для кнопки же любая картинка подойдет. Если нужна будет помощь — обращайтесь.
Денис, я вчера пыталась кнопку поставить. Но ничего не вышло.( Она вообще не отображалась почему-то(( Даже плагином пыталась сделать, один фиг ничего не вышло. Кодом пыталась, тоже ноль результата. Что-то я не понимаю, в чем проблема.
Я сегодня все методики попробую, по очереди по твоей статье.
Правда у меня есть строчка одна в коде, просто прописано слово Вверх, это было уже встроенно в шаблон. Может эту строчку просто убрать? Она так некрасиво отображается на блоге. В самом низуе, такое крошечное слово Вверх.
Посмотрел, Диана, блог — вроде кнопка ВВЕРХ работает, но слева есть кусок кода, который мне не очень нравится :)
https://yadi.sk/i/u8J76uWCdH9oH
Ого, не знал, что столько способов есть. У меня как-то криво стоит скрипт.
Денис, может подскажешь, что сделать?
А в чем собственно кривизна заключается? Я попробовал — вроде работает.
А мне нравится моя кнопка «ВВерх»
Она очень простая)) Я не помню, вроде скриптом прописывал)
А эта кнопка для прокрутки страницы вверх, устанавливается на какой именно движок? У меня есть сайт на движке WordPress, какую именно кнопку нужно будет ставить на него? Мне ТАМ она, эта кнопка, крайне необходима))) Или все вышеперечисленные становятся на все движки? Спасибо.
Эта кнопка устанавливается в любой движок. Я в статье привел пример плагина для WordPress и набор скриптов, которые могут установить кнопку наверх абсолютно на любой сайт. Нужны только навыки работы с кодом. Если у вас таких нет — обращайтесь.
Кнопка эта очень полезная, сам недавно поставил и постоянно пользуюсь, все устраивает. Правда, пошел по другому пути — через библиотеку jQuerry, но очень интересно было узнать и про другие варианты установки. Может быть, действительно стоит исправить. Вроде бы все просто и никаких подводных камней нет