제이쿼리를 이용한 간단한 스크롤 TOP 이동 버튼 입니다.
버튼 이미지는 우선 Font Awesome을 이용했습니다만 이미지 파일이나 css로 만들어서 사용하셔도 됩니다.
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Scroll back to top</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
<style>
.scrolltop {
display: none;
position: fixed;
right: 30px;
bottom: 50px;
z-index: 1030;
font-size: 1.875rem;
color: #868e96;
transition: all 0.5s ease-in-out;
opacity: 0.8;
}
.scrolltop:hover,
.scrolltop:focus {
color: #dc3545;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<div style="padding: 20px 20px 1500px 20px">
<h2>The example "scroll back to top"</h2>
<p>스크롤를 아래로 내리면 버튼이 나타 납니다.</p>
<p>버튼을 클릭하면 상단으로 이동 됩니다.</p>
</div>
<a id="backToTop" class="scrolltop" href="#">
<i class="fas fa-chevron-circle-up"></i>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#backToTop').fadeIn(500);
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 200);
});
});
</script>
</body>
</html>
맨 위로 가기 버튼 만들기, 자바스크립트 Scroll back to top
Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하
wonderbout.tistory.com
반응형
