jQuery(document).ready(function(){
// IE not supports, IE 지원 X
window.scrollY;
document.scrollingElement.scrollTop;
// Supports all major browsers
document.documentElement.scrollTop;
document.querySelector('html').scrollTop;
// 스크롤이 끝으로 이동 시 이벤트 발생
window.addEventListener('scroll', () => {
if (window.pageYOffset <= 0) {
jQuery('#back-to-top').removeClass('show');
} else {
jQuery('#back-to-top').addClass('show');
}
});
jQuery(window).on("touchmove", function (e) {
if (window.pageYOffset <= 0) {
jQuery('#back-to-top').removeClass('show');
} else {
jQuery('#back-to-top').addClass('show');
}
});
jQuery('#back-to-top').on('click touch', function() {
jQuery('html,body').animate({ scrollTop: 0 }, 500);
jQuery('#back-to-top').removeClass('show');
});
});
#back-to-top {
display: inline-block;
background-color: transparent !important;
width: 38px;
height: 38px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 18px !important;
left: 30px !important;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: visible;
z-index: 99999999;
}
.show {
opacity: 1 !important;
visibility: visible !important;
}
<a id="back-to-top"><img src='/icon/top.png' style='width:38px; height:38px;'></a>
'컴퓨터 > Javascript' 카테고리의 다른 글
SameSite (0) | 2020.10.01 |
---|