Прокрутка страницы вверх v.2
В статье Прокрутка страницы вверх было рассказано как сделать кнопку, по нажатию на которую пользователь сайта перемещался с низа страницы вверх.
В этой заметке будет предложен второй вариант реализации этой задаи средствами Jquery и CSS
Итак...
Для начала нам нужно добавить в первый тег от <body> (у меня в этом случае тег <div class="container">) класс .mainTop
А в конец шаблона (footer) это:
<div class="scrollup-btn btn-hide">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 1 32 32" id="arr1">
<path d="M22.4 22.5C22.8 22.9 23.5 22.9 24 22.5L25.7 20.8C26.1 20.4 26.1 19.7 25.7 19.2L16.8 10.3C16.4 9.9 15.6 9.9 15.2 10.3L6.3 19.2C5.9 19.7 5.9 20.4 6.3 20.8L8 22.5C8.5 22.9 9.2 22.9 9.6 22.5L16 16.1 22.4 22.5Z"></path>
</svg>
</div> В файл стилей style.css вставляем этот код:
.scrollup-btn {
border-radius: 7px;
left: 15px;
bottom: 15px;
background: #34495e;
width: 44px;
height: 44px;
}
.scrollup-btn {
position: fixed;
right: 25px;
bottom: 25px;
width: 44px;
height: 44px;
z-index: 9999;
border-radius: 7px;
background: #f7c221;
cursor: pointer;
box-shadow: 4px 4px 11px 0 rgba(50,50,50,.4);
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
-webkit-transform: translateZ(0);
}
svg:not(:root) {
overflow: hidden;
}
.btn-hide {
transform: translateY(115px);
-webkit-transform: translateY(115px);
}
.btn-hide {
bottom: -100px;
}Ну и осталось вставить в подвал страницы (footer) код JQuery:
<script type="text/javascript">
jQuery(function($) {
$(".scrollup-btn").addClass('btn-hide');
$(".scrollup-btn").click(function() {
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
if ($('.scrollup-btn').length){
var refScroll = $('.mainTop');
var refScroll_offset = refScroll.offset();
$(window).bind('scroll', function() {
if($(window).scrollTop() > refScroll_offset.top) {
$(".scrollup-btn").removeClass('btn-hide');
} else {
$(".scrollup-btn").addClass('btn-hide');
}
});
}
});
</script>Изменить стиль кнопки можно в коде CSS