Прокрутка страницы вверх
jQuery 4273
Достаточно вставить код, который представлен ниже, чтобы установить себе на сайт кнопку "вверх"
Внутрь тега <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 блока страницы