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
모바일 스크롤 이동시 TOP 버튼 삽입  (0) 2020.08.30

+ Recent posts