'이전 글(Prev Article) 버튼' 및 '다음 글(Next Article) 버튼'은 웹툰이나 드라마 같이 '이전 회차' 및 '다음 회차'가 있는 시리즈물 콘텐츠가 아닌 이상 그 효용가치가 떨어지는 것이 사실이나, 웹사이트 방문자의 체류시간을 증대시키고 이탈률을 감소시킬 수 있는 주요 기능인 것은 자명하다.
본 글은 북클럽 스킨을 기준으로 웹사이트 방문자의 편의를 높여 주는 '이전 글(Prev Article) 버튼' 및 '다음 글(Next Article) 버튼'을 생성하는 방법에 대한 내용이다.
총 5가지 방법으로 풀이되어 있으니 취사선택해서 적용해 보기 바라며, 추가로 이전 발행한 글과 동일한 맥락임을 참고 바란다.
★ 파일 준비
먼저 '버튼 이미지 파일'을 티스토리에 업로드한다.
파일은 직접 준비하거나 아래 공유한 파일을 사용하면 되는데, HTML과 CSS에 '파일 이름'이 코드로 삽입되니 '파일 이름'을 정확하게 지정 후 업로드해야 한다.
아래에 코드에서는 '이전 글 버튼 이미지 파일'은 'btn_left', '다음 글 버튼 이미지 파일'은 'btn_right'로 되어 있다.
또한 아래에서 설명할 버튼을 생성하는 '방법 ①'과 '방법 ②'에 따라 사용하는 '버튼 이미지 파일'이 다름을 참고 바란다.
방법 ① _ 화면 중앙 좌우 버튼
먼저 화면 중앙 좌우에 고정되어 있는 버튼을 생성해 보겠다.
CSS 작업
아래 코드를 CSS에 삽입한다.
/* 이전글 버튼 스타일 */
#btn_left {
position: fixed;
left: 0px;
top: 300px;
z-index: 999;
opacity: 0.5;
}
/* 다음글 버튼 스타일 */
#btn_right {
position: fixed;
right: 0px;
top: 300px;
z-index: 999;
opacity: 0.5;
}
btn_left에는 left: 0px;를 넣어 화면 좌측에, btn_right에는 right: 0px;를 넣어 화면 우측에 위치시킨다.
여기에 두 버튼 모두 top: 300px;를 넣어 세로 기준 화면 중앙에 위치시키고, position: fixed;를 넣어 버튼이 스크롤을 따라 움직이면서 화면에 고정되게 한다.
방법 ①-1 _ 페이지에만 나오는 버튼
첫 번째 방법은 버튼을 페이지에만 나타나게 하는 방법이다.
* 본 글에서 '리스트'라 함은 '첫 화면'인 'ID.tistory.com' 또는 '카테고리 페이지'인 'ID.tistory.com/category/~'를 의미하며, '페이지'라 함은 '콘텐츠(글) 페이지'인 'ID.tistory.com/숫자 또는 문자'를 의미한다.
HTML 작업
먼저 버튼을 생성하는 코드다.
아래의 코드를 HTML의 <div class="entry-content">와 ##_article_rep_desc_## 사이에 삽입한다. 내 경우 <div class="entry-content">를 검색하면 4개가 나오는데 제일 아래 코드에 해당한다.
이 위치에 삽입해야 버튼이 페이지에만 나타난다.
<div class="entry-content">
<!-- 이전글 & 다음글 버튼 시작 -->
<div id="btn_left"></div>
<div id="btn_right"></div>
<!-- 이전글 & 다음글 버튼 끝 -->
다음은 버튼에 링크를 적용하는 코드다.
아래의 코드를 HTML의 <s_paging> ~ </s_paging> 사이에 삽입한다.
이 위치에 삽입해야 버튼 클릭 시 다른 페이지로 연결된다.
참고로 같은 카테고리 내 '관련 글'이 아닌, 카테고리와 관계없이 '전체 글'에 대한 '이전 글'과 '다음 글'이 적용된다.
<s_paging>
<!-- 이전글 & 다음글 버튼 시작 -->
<script>
//<![CDATA[
var tmp_btn_left = "<a title='이전글'><img src='./images/btn_left.png' alt='next-post' /></a>";
var tmp_btn_right = "<a title='다음글'><img src='./images/btn_right.png' alt='prev-post' /></a>";
document.getElementById("btn_left").innerHTML = tmp_btn_left;
document.getElementById("btn_right").innerHTML = tmp_btn_right;
//]]>
</script>
<!-- 이전글 & 다음글 버튼 끝 -->
</s_paging>
작업 결과
① 버튼이 리스트에서는 출력되지 않음
② 버튼이 페이지 화면의 좌우에 생성 및 고정
방법 ①-2 _ 리스트에도 나오는 버튼
두 번째 방법은 버튼을 리스트에도 나타나게 하는 방법이다.
HTML 작업
기존(상기) 버튼을 생성하는 코드인 <div id="btn_left"></div>와 <div id="btn_right"><div>의 위치만 변경하는 작업으로, 아래와 같이 HTML의 <s_paging> ~ </s_paging> 사이에 삽입한다.
<s_paging>
<!-- 이전글 & 다음글 버튼 시작 -->
<div id="btn_left"></div>
<div id="btn_right"></div>
<script>
//<![CDATA[
var tmp_btn_left = "<a title='이전글'><img src='./images/btn_left.png' alt='next-post' /></a>";
var tmp_btn_right = "<a title='다음글'><img src='./images/btn_right.png' alt='prev-post' /></a>";
document.getElementById("btn_left").innerHTML = tmp_btn_left;
document.getElementById("btn_right").innerHTML = tmp_btn_right;
//]]>
</script>
<!-- 이전글 & 다음글 버튼 끝 -->
</s_paging>
작업 결과
① 버튼이 리스트와 페이지에 모두 출력
방법 ①-3 _ 스크롤을 내리면 나타나는 버튼
두 번째 방법까지는 버튼이 화면 최상단에서부터 나타나 있는데, 세 번째 방법은 스크롤을 일정 부분까지 내렸을 때 버튼을 나타나게 하는 방법이다.
HTML 작업
기존(상기) HTML 코드에 빨간 박스 표시된 'function' 코드를 추가한다.
스크롤을 내려서 스크롤 탑이 '1000' 보다 커지면 버튼을 나타나게 하고, 스크롤을 올려서 스크롤 탑이 '1000' 보다 작아지면 버튼을 사라지게 하는 코드다.
<s_paging>
<!-- 이전글 & 다음글 버튼 시작 -->
<div id="btn_left"></div>
<div id="btn_right"></div>
<script>
$(function(){
$("#btn_left").hide();
$(window).scroll(function() {
if($(this).scrollTop() > 1000) {
$("#btn_left").fadeIn();
}
else {
$("#btn_left").fadeOut();
}
});
});
$(function(){
$("#btn_right").hide();
$(window).scroll(function() {
if($(this).scrollTop() > 1000) {
$("#btn_right").fadeIn();
}
else {
$("#btn_right").fadeOut();
}
});
});
//<![CDATA[
var tmp_btn_left = "<a title='이전글'><img src='./images/btn_left.png' alt='next-post' /></a>";
var tmp_btn_right = "<a title='다음글'><img src='./images/btn_right.png' alt='prev-post' /></a>";
document.getElementById("btn_left").innerHTML = tmp_btn_left;
document.getElementById("btn_right").innerHTML = tmp_btn_right;
//]]>
</script>
<!-- 이전글 & 다음글 버튼 끝 -->
</s_paging>
CSS 작업
버튼이 화면 최상단에서는 나타나지 않도록 기존(상기) CSS 코드에 display: none;을 추가한다. 이 코드를 추가하지 않으면 화면 최상단에 버튼이 나타났다가 사라진다.
/* 이전글 버튼 스타일 */
#btn_left {
display: none;
position: fixed;
left: 0px;
top: 300px;
z-index: 999;
opacity: 0.5;
}
/* 다음글 버튼 스타일 */
#btn_right {
display: none;
position: fixed;
right: 0px;
top: 300px;
z-index: 999;
opacity: 0.5;
}
작업 결과
① 새로고침을 해도 버튼이 화면 최상단에서는 출력되지 않음
② 스크롤이 일정 부분까지 내려가면 버튼 출력
③ 스크롤이 일정 부분까지 올라가면 버튼 제거
방법 ② _ 화면 하단 우측 버튼
다음은 화면 하단 우측에 고정되어 있는 버튼을 생성해 보겠다. 먼저 '버튼 이미지 파일'을 교체해야 한다.
CSS 작업
아래 코드를 CSS에 삽입한다.
'방법 ①'의 CSS 코드에서 버튼의 위치를 화면 하단 우측으로 변경하고 마우스 오버 효과를 추가했다.
두 버튼 모두 right: 10px;로 설정했고, 각각 bottom: 90px;와 bottom: 140px;로 설정했다.
/* 이전글 버튼 스타일 */
#btn_left {
display: none;
position: fixed;
right: 10px;
bottom: 140px;
z-index: 999;
opacity: 0.5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#btn_left:hover{
background-color: black;
transition: 0.3s;
transform: scale(1.1);
}
/* 다음글 버튼 스타일 */
#btn_right {
display: none;
position: fixed;
right: 10px;
bottom: 90px;
z-index: 999;
opacity: 0.5;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#btn_right:hover{
background-color: black;
transition: 0.3s;
transform: scale(1.1);
}
'버튼 이미지 파일'을 교체하고 CSS 작업을 완료하면 버튼이 화면 하단 우측에 나타난다.
방법 ②-1 _ 스크롤을 멈추면 나타나는 버튼
네 번째 방법은 스크롤을 멈췄을 때에만 버튼을 나타나게 하는 방법이다.
HTML 작업
기존(상기) HTML 코드에 빨간 박스 표시된 'if' 코드를 추가한다.
<s_paging>
<!-- 이전글 & 다음글 버튼 시작 -->
<div id="btn_left"></div>
<div id="btn_right"></div>
<script>
$(function(){
$("#btn_left").hide();
$(window).scroll(function() {
if($(this).scrollTop() > 1000) {
$("#btn_left").fadeIn();
}
else {
$("#btn_left").fadeOut();
}
if($(this).scrollTop() > 1000) {
$("#btn_left").hide();
}
});
});
$(function(){
$("#btn_right").hide();
$(window).scroll(function() {
if($(this).scrollTop() > 1000) {
$("#btn_right").fadeIn();
}
else {
$("#btn_right").fadeOut();
}
if($(this).scrollTop() > 1000) {
$("#btn_right").hide();
}
});
});
//<![CDATA[
var tmp_btn_left = "<a title='이전글'><img src='./images/btn_left.png' alt='next-post' /></a>";
var tmp_btn_right = "<a title='다음글'><img src='./images/btn_right.png' alt='prev-post' /></a>";
document.getElementById("btn_left").innerHTML = tmp_btn_left;
document.getElementById("btn_right").innerHTML = tmp_btn_right;
//]]>
</script>
<!-- 이전글 & 다음글 버튼 끝 -->
</s_paging>
작업 결과
① 스크롤이 움직일 때는 버튼 제거
② 스크롤이 멈췄을 때만 버튼 출력
방법 ②-2 _ 스크롤을 올릴 때만 나타나는 버튼
다섯 번째 방법은 스크롤을 올릴 때만 버튼을 나타나게 하는 방법이다.
HTML 작업
기존(상기) HTML 코드에서 몇 가지 코드를 추가해야 하는데, 코드 내용이 많으니 그냥 전체 복사해서 삽입하기 바란다.
<s_paging>
<!-- 이전글 & 다음글 버튼 시작 -->
<div id="btn_left"></div>
<div id="btn_right"></div>
<script>
$(function(){
$("#btn_left").hide();
var didScroll;
// 스크롤 시 스크롤 이벤트 감지, didScroll의 변수값을 true로 설정
$(window).scroll(function(event) {
didScroll = true;
});
// hasScrolled() 실행, 0.25초마다 didScroll 상태 재설정, 다시 didScroll의 변수값을 false로 설정
setInterval(function() {
if(didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
var lastScrollTop = 0; // 현재 스크롤 위치를 항상 '0'으로 설정
var delta = 1; // 현재 스크롤 위치에서 상하 관계 없이 '1' 이상 스크롤링 후부터 동작 실행
function hasScrolled() {
var st = $(window).scrollTop(); // 접근하기 위해 현재 스크롤 위치 저장
if(Math.abs(lastScrollTop - st) <= delta)
return; // delta값보다 더 스크롤되었는지 확인
if (st > lastScrollTop) { // 스크롤 방향 확인 - st가 lastScrollTop('0')보다 커졌다면, 즉 스크롤을 내렸다면
$("#btn_left").fadeOut(); // 버튼을 페이드아웃
} else {
if(st + $(window).height() < $(document).height()) { // 스크롤 방향 확인 - st가 lastScrollTop('0')보다 작아졌다면, 즉 스크롤을 올렸다면
$("#btn_left").fadeIn(); // 버튼을 페이드인
}
}
lastScrollTop = st;
}
});
$(function(){
$("#btn_right").hide();
var didScroll;
// 스크롤 시 스크롤 이벤트 감지, didScroll의 변수값을 true로 설정
$(window).scroll(function(event) {
didScroll = true;
});
// hasScrolled() 실행, 0.25초마다 didScroll 상태 재설정, 다시 didScroll의 변수값을 false로 설정
setInterval(function() {
if(didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
var lastScrollTop = 0; // 현재 스크롤 위치를 항상 '0'으로 설정
var delta = 1; // 현재 스크롤 위치에서 상하 관계 없이 '1' 이상 스크롤링 후부터 동작 실행
function hasScrolled() {
var st = $(window).scrollTop(); // 접근하기 위해 현재 스크롤 위치 저장
if(Math.abs(lastScrollTop - st) <= delta)
return; // delta값보다 더 스크롤되었는지 확인
if (st > lastScrollTop) { // 스크롤 방향 확인 - st가 lastScrollTop('0')보다 커졌다면, 즉 스크롤을 내렸다면
$("#btn_right").fadeOut(); // 버튼을 페이드아웃
} else {
if(st + $(window).height() < $(document).height()) { // 스크롤 방향 확인 - st가 lastScrollTop('0')보다 작아졌다면, 즉 스크롤을 올렸다면
$("#btn_right").fadeIn(); // 버튼을 페이드인
}
}
lastScrollTop = st;
}
});
//<![CDATA[
var tmp_btn_left = "<a title='이전글'><img src='./images/btn_left.png' alt='next-post' /></a>";
var tmp_btn_right = "<a title='다음글'><img src='./images/btn_right.png' alt='prev-post' /></a>";
document.getElementById("btn_left").innerHTML = tmp_btn_left;
document.getElementById("btn_right").innerHTML = tmp_btn_right;
//]]>
</script>
<!-- 이전글 & 다음글 버튼 끝 -->
</s_paging>
작업 결과
① 스크롤을 내릴 때는 버튼 제거
② 스크롤을 올릴 때만 버튼 출력
지금까지 '이전 글(Prev Article) 버튼' 및 '다음 글(Next Article) 버튼'을 생성하는 5가지 방법에 대해 설명했다.
이전 글인 '탑(Top) 버튼' 및 '다운(Down) 버튼'을 생성하는 방법과 맥락이 같기 때문에 일부 생략한 내용들이 있으니, 조금이라도 더 자세히 알고 싶다면 '이전 글 버튼'을 눌러서 확인해 보기 바란다.
