Прокрутка страницы вверх v.2

jQuery CSS   1910  

В статье Прокрутка страницы вверх было рассказано как сделать кнопку, по нажатию на которую пользователь сайта перемещался с низа страницы вверх.

В этой заметке будет предложен второй вариант реализации этой задаи средствами 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

 



Поиск

Метки