상단으로 이동 버튼
블로그 글을 작성하고 읽다보면, 맨 처음 상단으로 돌아가는 버튼이 있으면 좋겠다는 생각을 종종합니다.
아이폰의 경우에는 스크린 오른쪽 상단을 두번 클릭하는 기능을 활용하면 되지만, PC의 경우는 이 버튼을 활용할 수 없습니다.
블로그 스킨에서 해결하는 방법
제가 현재 사용하는 블로그 스킨(테마)에서는 기본적으로 이 기능을 제공합니다. 제가 설치한 스킨(테마)가 궁금하신 분은 제 기존 포스팅을 참조하세요.
하지만, 이 기능을 지원하지 않는 많은 스킨에서도 이런 기능을 활용하고 싶습니다.
레이아웃 가젯에서 해결하는 방법
구글 블로그의 관리자 페이지에서 간단한 코드 추가로 적용이 가능합니다. 아래 캡쳐 화면처럼 구현됩니다.
|
| 적용 사례 : 상단으로 이동 버튼 |
이미지 말고 실제 블록그 상에서 적용된 예시를 보고 싶으시면, 제 다른 블로그를 참조해 주세요. : 적용 사례
제 현재 블로그는 테마에서 지원 중이서 중복 설치를 하지는 않았습니다.
가젯 설치하는 법
먼저, Blogger 관리자 페이지 > 레이아웃 메뉴로 이동합니다. 그 이후에, '블로그 게시물' 위 섹션에서 '가젯 추가'를 클릭합니다.
마지막으로 HTML/JavaScript 위젯 선택 후, 아래 코드를 그대로 붙여넣으면 됩니다.
순서대로 화면 캡쳐 입니다. 관리화면에서 아래 메뉴의 '레이아웃'을 누릅니다.
|
| 레이아웃 메뉴 선택하기 |
그 다음 레이아웃 화면에서 어느 위치든 상관없이 가젯 추가 버튼을 누릅니다.
|
| 가젯 추가 버튼 |
그 이후 Html/자바스크립트를 클릭합니다.
|
| 가젯추가 버튼 누르기 |
그럼 나오는 창에서 제목은 비워두시고, 콘텐츠 칸에 스크립트 코드를 복사해서 넣으시면 됩니다.
레이아웃 배치상에서 페이지 본문 섹션에 배치해주세요.
|
| 레이아웃 배치 위치 - 페이지 본문 섹션에 배치 |
스크립트 코드
스크립트 코드는 아래 박스를 클릭해 펼쳐서 확인 가능합니다. 아래 박스에서의 복사가 불편하신 분은 다음 링크에서도 확인하실 수 있습니다. : 코드 보기
이 부분을 클릭하면 코드를 확인할 수 있습니다
<!-- 상단 이동 버튼 -->
<style>
#topBtn { display: none; position: fixed; bottom: 24px; right: 16px; z-index: 99999; font-size: 18px; border: none; background-color: rgba(0, 0, 0, 0.5); color: white; cursor: pointer; padding: 14px 16px; border-radius: 50%; opacity: 0.7; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
#topBtn:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.7); }
@media (max-width: 480px) { #topBtn { bottom: 20px; right: 16px; padding: 12px 14px; font-size: 16px; } }
</style>
<button onclick="topFunction()" id="topBtn" title="맨 위로">▲</button>
<script>
window.onscroll = function() { const btn = document.getElementById("topBtn"); if (window.scrollY > 100) { btn.style.display = "block"; } else { btn.style.display = "none"; } };
function topFunction() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
</script>
위의 코드를 앞에서 설명드린 가젯 'HTML/자바스크립트 구성' 항목의 콘텐츠 칸에 붙여 넣어주세요.
여기까지 진행하시면 모든 세팅은 완료입니다.
댓글 쓰기