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

jQuery   3231  

Достаточно вставить код, который представлен ниже, чтобы установить себе на сайт кнопку "вверх"

Внутрь тега <head> вставляем

 <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">

Код CSS и сама кнопка с классом .ir-arriba вставляется после тега <body>

<style>
div.ir-arriba {
 position: fixed; 
 left: 1rem;
 bottom: 1rem;
 display: none;
 padding: 14px;
 background-color: #0098d3;
 color: #fff;
 font-weight: bold;
 border: 2px solid #fff;
 cursor: pointer;
 opacity: 0.7;
 border-radius: 15px;
}
</style>
<div class="ir-arriba" style="display: block;"><i class="fa fa-chevron-up"></i></div>

Подключение скрипта jQyery и сам код прокрутки вверх устанавливается вниз страницы, перед закрывающим тегом </body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
 jQuery(".ir-arriba").hide();
 jQuery(".ir-arriba").click(function() {
 jQuery('html, body').animate({ scrollTop: 0 }, 'fast');
 });
 
 if (jQuery('.ir-arriba').length){
 var refScroll = jQuery('#wrap');
 var refScroll_offset = refScroll.offset();
 
 jQuery(window).on('scroll', function() {
 if(jQuery(window).scrollTop() > refScroll_offset.top) {
 jQuery(".ir-arriba").show(200);
 } else {
 jQuery(".ir-arriba").hide();
 }
 });
 }
 
});
</script>

#wrap - это id блока страницы



Поиск

Метки