Собственно код не мой. Умельцы вытащили его из проекта яндекс поиск на сайт, а остальные подхватили и размножили описание на своих сайтах! Итак по порядку:
JavaScript
$(document).ready(function(){
$(window).scroll(function (){
if ($(this).scrollTop() > 0){
$('#scroller').fadeIn();
} else {
$('#scroller').fadeOut();
}
});
$('#scroller').click(function () {
$('body,html').animate({scrollTop: 0}, 400);
return false;
});
});
Настройка скрипта
- #scroller — название HTML контейнера для обертки копки;
- scrollTop() > 0 — величина скролла вниз, после которой появляется кнопка вверх;
- animate({scrollTop: 0}, 400); — скорость подъема вверх;
HTML разметка
Перед закрывающим тегом BODY добавить следующий код:
<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
CSS стилизация
.b-top{
z-index:2600;
position:fixed;
left:0;
bottom:90px;
width:34%;
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;
background:#D8D5C2 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png/b-j-top.png) no-repeat 50% 11px;
border-radius:7px;
}
Комментарии