Кнопка "наверх" как на Хабре или ВК

504
.
Решил поделится мыслями как написать простенький скриптик кнопки "наверх". Надо было для себя, в итоге я её прокачал посильнее (ширина кнопки меняется даже в зависимости от ширины экрана), но тут версия попроще, практически бета, но рабочая. Подойдёт тем, кто делает веб-шаблоны для джона.
Для начала создадим простой .html файл и подключим библиотеку jQuery
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <body>

 </body>
</html>

Теперь создадим блок который будет нашей кнопкой
<div class="to_top">
 <div class="to_top_opacity"></div>
 <div class="to_top_panel" title="Наверх">
 <div class="to_top_button">
 <span class="arrow">↑</span> <span class="label">наверх</span>
 </div> 
 </div>
 </div>

Прошу обратить внимание, что блок “to_top_opacity” совсем не лишний и создан не зря. Это костыль который должен быть потому что CSS-параметр opacity делает прозрачными все вложенные блоки, а это совсем не то, что нам подходит ведь у текста будет иная прозрачность.
Перейдём к написанию стилей, углубляться здесь не будем, так как статья не по CSS
.to_top {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 90px;
display: none;
 cursor: pointer;
}
.to_top_opacity {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 90px;
background-color: #F0F0F0;
opacity: 0;
}
.to_top .to_top_panel {
width: 100%;
height: 100%;
font-size: 13px;
color: #4D7285;
padding-top: 10px;
position: relative;
}
.to_top .to_top_button {
text-align: left;
line-height: 15px;
margin-left: 10px;
font-family: tahoma, arial, verdana, sans-serif;
font-weight: bold;
opacity: 0.2;
}
.to_top .to_top_button .arrow {
font-size: 14px;
font-weight: bold;
font-family: tahoma;
vertical-align: middle;
}

Благодаря CSS теперь панелька кнопки будет располагаться слева от самого верха до самого низа страницы, так же мы её прячем изначально потому что она должна будет появится лишь после прокрутки определённого количества пикселей.
Переходим к самому интересному – написанию js-кода
$(document).ready(function() {//когда документ будет загружен
$(".to_top").each(function(){//вешаем события
$(this).mouseover(function(){//при наведении мыши
$(".to_top_opacity").stop...animate({opacity:"1"},300);//делаем ярче фон
$(".to_top_button").stop...animate({opacity:"1"},300);//делаем ярче буквы
});
$(this).mouseout(function(){//когда мышь убрана
$(".to_top_opacity").stop...animate({opacity:"0"},300);//делаем фон прозрачнее
$(".to_top_button").stop...animate({opacity:"0.2"},300);//делаем цифры прозрачнее
});
});

$(window).scroll(function(){//вешаем событие прокрутки окна браузера
var g = $(window).scrollTop();//считаем количество пикселей от верха
if(g == 0) $(".to_top").removeClass("no-count");//если мы вверху, то убираем флаг на запрет счётчика

if(!$(".to_top").hasClass("no-count")){//если запрета нет, то...
if(g > 200 && $(".to_top").is(":hidden")){//цифра 200 это порог сработки функции
$(".to_top").addClass("visible");//показываем нашу панель
$(".to_top").fadeIn(500);//анимация плавного появления
$(".to_top").click(function(){//вешаем клик функцию
$("body, html").animate({scrollTop:0},800);//прокрутка к самому верху окна
$(".to_top").fadeOut(300);//в процессе прокрутки исчезновение блока кнопки
$(".to_top").addClass("no-count");//вешаем флаг запрета на счётчик
});
}
if(g < 200 && $(".to_top").hasClass("visible")){//если панелька уже видна 
 //и мы вернулись на наш порог 200 назад, то...
$(".to_top").removeClass("visible");//делаем блок невидимым
$(".to_top").fadeOut(300);//с анимацией исчезовения
}
}else{
$(".to_top").unbind("click");//костыль от "дураков" типа меня
}
});
});

Вот и всё. Когда я писал это у Хабровцев была кривая перемотка. Щас они сделали как у меня, приятно однако. =))) Теперь у них тоже можно вернутся вниз к тому месту, откуда перемотался вверх. Но мой конечный результат всё равно функциональнее.
Писал на коленке, js немного "грязный", но тем не менее...
Исходник, он же демо, прикреплён.
Прикрепленные файлы:
.
А без жабы ни как ? На чистом html/php ?
.
Fenix_61, Думаю ответ итак ясен. =) Чем-то надо постоянно считать высоту + по любому виду скролла (будь то мышь, кнопки home или end, pageUp и pageDown, может даже стрелочки) ловить изменения высоты. Тут без яваскрипта никак. Он для этого и сделан.
.
SlyDeath (05.12.2012 / 21:13)
Fenix_61, Думаю ответ итак ясен. =) Чем-то надо постоянно считать высоту + по любому виду скролла (будь то мышь, кнопки home или end, pageUp и pageDown, может даже стрелочки) ловить изменения высоты.
Ясно а с телефона тоже будет работать ?
.
Fenix_61 (05.12.2012 / 21:16)
Ясно а с телефона тоже будет работать ?
C миниоперы точно нет.
.
~XeOn~ (05.12.2012 / 21:17)
C миниоперы точно нет.
Жаль ну тогда это кнопочка уже для web'а идет
.
Fenix_61, Ну с телефоном лучше юзать jquery mobile, код тот же, но весит меньше и под мобилы заточено. Но как по мне так на мобиле кнопка вверх лишнее. На мобилах есть скроллинг лёгким движением пальца, а что-то более древнее из мобил может использовать html якоря.
<a href="#body">наверх</a>

Эта ссылка промотает окно браузера к элементу с id = body.
Поэтому у нас кнопка наверх показывается всем у кого экраны больше 1024х768. Мобилы сюда не входят. =)
.
SlyDeath
~XeOn~, Опера вообще js не поддерживает и по определению убогий браузер. =) Не знаю кому жалко 200р на анлим интернет, у меня так вообще что дома что на работе вафля, а когда я на улице я с друзьями общаюсь, а не в телефоне сижу. =)
Fenix_61, я сделал пометку, что это будет скорее важно тем, кто делает веб-шаблоны.
.
КЕК
Fenix_61 (05.12.2012 / 21:19)
Жаль ну тогда это кнопочка уже для web'а идет
Не только
.
Покажите пример если кто сделал себе. на ВК и хабру не посылать.
Всего: 19