Кнопка «Наверх»
Если страницы сайта могут иметь достаточно длинный контент, то для удобства пользователей обычно делают так называемую кнопку "наверх", при клике по которой страница быстро прокручивается в начало. Рассмотрим один из вариантов, как ее можно сделать.
Допустим мы будем использовать для кнопки картинку - одну в обычном ее состоянии, другую будем отображать при наведении на кнопку. Подготовим единый файл-спрайт с названием, предположим, , в котором вверху будет находиться обычная картинка, а под ней ховерная.
Дальше грузим картинку на сайт и добавляем стили и JS-код:
Скопировано
.scrollTop {
display: none;
position: fixed;
z-index: 999;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
color: #14223c;
font-size: 24px;
border-radius: 50%;
background: #fba432;
box-shadow: 0 5px 18px #14223c25;
}
Скопировано
var speed = 500,
$scrollTop = $( '<button href="#" class="scrollTop">↑</button>' ).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.show() : $scrollTop.hide();
}
$(window).scroll( function() { show_scrollTop(); } );
show_scrollTop();