Для начала создадим простой .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 немного "грязный", но тем не менее...
Исходник, он же демо, прикреплён.
