😢 스크롤 내리는 거 너무 귀찮아.
글을 읽을 때 제일 귀찮은 게 스크롤하는 것.
특히 맨 위로 올리거나 내릴 때!!
위로 가기 버튼이랑 아래로 가기 버튼이 있으면 좋겠다는 생각을 한다.
나만 귀찮은게 아닌지 여러 블로그에서 해결을 위해 이런저런 기능들을 만들었더라.
나는 제이스토리님의 포스팅에서 본 스크롤 위치에 따라서 버튼의 모양이 바뀌는 방법에서 아이디어를 얻었다.
✨ 페이지 위로 가기 / 아래로 가기 버튼 만들기: 구현할 3가지 목표
첫 번째, 버튼에 사용하는 이미지는 1개
두 번째, 처음에는 버튼이 안 보이고 스크롤이 움직이기 시작할 때 버튼이 나타나기
세 번째, 스크롤을 아래로 내리면 아래로 가기 버튼, 스크롤을 위로 올리면 위로 가기 버튼으로 자동 변환되기
🔧 포트폴리오 스킨 수정하기
✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 또는 HTML 화면으로 들어가면 된다.
✔ 코드 수정이 끝났다면 적용을 누른다.
👉 이미지 준비
(1) 버튼으로 사용할 이미지를 다운받는다.
① 화살표만 있는 모양
② 원 안에 화살표가 있는 모양
(2) 다운 받은 이미지 파일을 파일업로드에 업로드한다.
📌 페이지 위로 가기 / 아래로 가기 버튼 만들기
JavaScript를 사용해 .tag_content 안의 태그들을 랜덤으로 정렬하게 만든다.
HTML의 </body> 위에 코드를 입력하면 된다
📝 코드 설명
👉 HTML 구조
(1) <div id="btn_scroll" title="이동">
✔ div → 버튼 역할을 하는 박스를 만든다
✔ id="btn_scroll" → CSS와 JavaScript에서 이 요소를 선택할 때 사용하는 이름.
✔ title="이동" → 마우스를 버튼 위에 올리면 "이동"이라는 툴팁(작은 설명)이 나타난다.
(2) <img src="./images/btn_top.svg" width="30" height="30" alt="scroll" />
✔ src="./images/btn_top.svg" → 버튼의 이미지 파일 경로
✔ width="30" height="30" → 이미지 크기(가로 30px, 세로 30px) 설정
✔ alt="scroll" → 이미지가 표시되지 않을 경우 대신 보여줄 설명.
👉 JavaScript : 버튼이 언제 나타나고, 클릭하면 어떻게 동작하는지를 결정
(1) 페이지가 로드된 후 실행되는 코드
$(document).ready(function() {
…내용…
});페이지가 다 뜬 다음에 이 안에 있는 내용이 실행된다.
(2) 처음에 버튼을 숨김
$("#btn_scroll").hide();페이지가 로드됐을 때 버튼이 안 보이게 설정
(3) 스크롤 방향 감지
let lastScrollTop = $(window).scrollTop();let lastScrollTop는 현재 스크롤 위치를 저장하는 변수다.
✔ $(window).scrollTop() → 현재 스크롤된 위치를 가져온다.
(4) 스크롤 이벤트 감지
$(window).scroll(function() {
let scrollTop = $(window).scrollTop();
let windowHeight = $(window).height();
let docHeight = $(document).height();스크롤할 때마다 실행된다.
✔ scrollTop → 현재 위에서부터 얼마나 내려왔는지 확인
✔ windowHeight → 브라우저 창의 높이
✔ docHeight → 전체 문서(페이지)의 높이
(5) 스크롤 방향에 따라 버튼 회전
if (scrollTop > lastScrollTop) {
$("#btn_scroll img").css("transform", "rotate(180deg)");
$("#btn_scroll").data("direction", "down");
} else {
$("#btn_scroll img").css("transform", "rotate(0deg)");
$("#btn_scroll").data("direction", "up");
}만약, 아래로 스크롤하면 버튼의 화살표가 아래로 향하게 회전한다.
그렇지 않으면, 즉 위로 스크롤하면 화살표가 위로 향하게 회전한다.
(6) 버튼 표시 여부 결정
if (scrollTop === 0 || scrollTop + windowHeight >= docHeight) {
$("#btn_scroll").fadeOut();
} else {
$("#btn_scroll").fadeIn();
}만약, 페이지 맨 위(0) 또는 맨 아래(docHeight)일 때 버튼을 숨긴다. → fadeOut()
그렇지 않으면, 버튼이 나타난다. → fadeIn()
(7) 버튼 클릭 시 동작 설정
$("#btn_scroll").click(function() {
let direction = $("#btn_scroll").data("direction");
let docHeight = $(document).height();
if (direction === "down") {
$("html, body").animate({ scrollTop: docHeight }, 800);
} else {
$("html, body").animate({ scrollTop: 0 }, 800);
}
});버튼을 클릭하면 위/아래로 자동 스크롤한다.
✔ data("direction") 값을 확인해서 down이면 페이지 맨 아래로, up이면 페이지 맨 위로.
✔ animate({ scrollTop: 값 }, 800) → 800ms(0.8초) 동안 부드럽게 이동.
👉 CSS 코드
position: fixed → 버튼이 항상 같은 위치에 있도록 고정.
ight: 40px / bottom: 40px → 버튼 위치(화면의 오른쪽 아래 40px 간격)
z-index: 100 → 다른 요소들보다 위쪽에 표시.
display: flex / justify-content: center / align-items: center → 버튼에 사용된 이미지를 가운데 정렬
border-radius: 50% → 버튼 모양(둥글게)
box-shadow: 0 0 10px rgba(0, 0, 0, .4) → 버튼에 그림자 효과 추가
cursor: pointer → 마우스를 올리면 마우스 포인터가 손 모양
opacity: 0.8 → 버튼의 투명도(80%)
transition: 0.3s → 버튼이 바뀔 때 0.3초 동안 부드럽게 애니메이션 설정
background-color: #FF90BC → 버튼 위에 마우스를 올리면 배경색이 #FF90BC으로 변경
transform: scale(1.1) → 버튼 위에 마우스를 올리면 버튼 크기를 1.1배 확대
💻 적용 코드(btn_top 이미지만 사용할 경우)
👉 HTML & JavaScript
<div id="btn_scroll" title="이동">
<img src="./images/btn_top.svg" width="30" height="30" alt="scroll" />
</div>
<script>
$(document).ready(function() {
$("#btn_scroll").hide();
let lastScrollTop = $(window).scrollTop();
$(window).scroll(function() {
let scrollTop = $(window).scrollTop();
let windowHeight = $(window).height();
let docHeight = $(document).height();
if (scrollTop > lastScrollTop) {
$("#btn_scroll img").css("transform", "rotate(180deg)");
$("#btn_scroll").data("direction", "down");
} else {
$("#btn_scroll img").css("transform", "rotate(0deg)");
$("#btn_scroll").data("direction", "up");
}
lastScrollTop = scrollTop;
if (scrollTop === 0 || scrollTop + windowHeight >= docHeight) {
$("#btn_scroll").fadeOut();
} else {
$("#btn_scroll").fadeIn();
}
});
$("#btn_scroll").click(function() {
let direction = $("#btn_scroll").data("direction");
let docHeight = $(document).height();
if (direction === "down") {
$("html, body").animate({ scrollTop: docHeight }, 800);
} else {
$("html, body").animate({ scrollTop: 0 }, 800);
}
});
});
</script>
👉 CSS
#btn_scroll {
position: fixed;
right: 40px;
bottom: 40px;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
cursor: pointer;
opacity: 0.8;
transition: 0.3s;
}
#btn_scroll:hover {
background-color: #FF90BC;
transform: scale(1.1);
}
👀 적용 모습
이런 식으로 스크롤 움직임에 따라 자동으로 버튼 모양이 변한다.
👉 btn_top, btn_bottom 두 개의 이미지를 사용하는 전체 코드와 설명이 필요하신 분은 제이스토리님의 블로그를 참고해주세요.
📍 참고
✅ 만약 기존 위로 가기 또는 아래로 가기 버튼이 나타나면 CSS 편집 화면에서 아래 코드를 추가해 주면 된다.
#footer .page-top {display: none;}<참고 : Galam.님>
✅ 스크롤이 부드럽게 이동하고 싶으면 CSS 편집 화면에서 아래 코드를 추가하면 된다.
html {
scroll-behavior: smooth;
}
