최상위 바로가기 아이콘 만드는 방법?
본문
안한지 너무 오래되다보니~ 아무것도 기억나질 않네요 ㅠ
간단한 페이지 제작하고 있는데 안내사항이 많아 스크롤이 많습니다.
위의 사진처럼 최상위로 올라가는 아이콘 넣고 하고 싶은데 도움 받을 수 있을까요? ㅠ
답변 3
잘 못찾았었는데 감사합니다~
<a href="#" id="go-top">
<img src="top-arrow.png" alt="맨 위로 이동">
</a>
$(document).ready(function() {
$("#go-top").on('click', function() {
$("html, body").animate({
scrollTop: 0
}, 500);
});
});
모바일에서는 작동이 안됩니다.
head.sub.php 파일
<section class="header" id="header"> ... </section>
head.sub.php 파일
<div class="top-button" style="position: fixed; bottom: 5px; right: 5px;"> <a href="#header"><img src="<?php echo G5_THEME_URL ?>/img/top.png" title="위로 가기"></a> </div>
--> <body> 태그 바로 뒤에 붙여넣으면 됩니다.
CSS 코드 추가
.top-button { z-index: 9999; }
모바일에서 버튼 숨기기
@media screen and (max-width:690px) {
.top-button { display: none; }
}
답변을 작성하시기 전에 로그인 해주세요.
