Кнопка «Наверх»
Если страницы сайта могут иметь достаточно длинный контент, то для удобства пользователей обычно делают так называемую кнопку "наверх", при клике по которой страница быстро прокручивается в начало. Рассмотрим один из вариантов, как ее можно сделать.
Допустим мы будем использовать для кнопки картинку - одну в обычном ее состоянии, другую будем отображать при наведении на кнопку. Подготовим единый файл-спрайт с названием, предположим, , в котором вверху будет находиться обычная картинка, а под ней ховерная.
Дальше грузим картинку на сайт и добавляем стили и JS-код:
Скопировано
.scrollTop {
display: none;
z-index: 999999;
transition: 0s;
position: fixed;
bottom: 20px;
right: 1%;
width: 40px;
height: 40px;
background: url(img/scroll-up.png);
}
.scrollTop:hover {
background-position: 0 -40px;
}
Скопировано
var speed = 500,
$scrollTop = $( '<a href="#" class="scrollTop">' ).appendTo( 'body' );
$scrollTop.click( function(e) {
e.preventDefault();
$( 'html:not(:animated), body:not(:animated)' ).animate( { scrollTop: 0}, speed );
});
function show_scrollTop() {
$(window).scrollTop() > 300 ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600);
}
$(window).scroll( function() { show_scrollTop(); } );
show_scrollTop();