그누보드 - 상단으로 가기 버튼 만들기
상단으로 가기란?
사이트 우측 하단에 위치 하며 클릭시 최상단으로 이동 합니다.
동영상 설명
Step 1
위와 같은 아이콘 사이트 같은 곳에서 적당한 이미지를 다운 받습니다.
Step 2
파일 업로드
받은 이미지를 업로드 하시고 이미지 경로를 아래 HTML 에 맞게 수정 합니다.
tail.php
<a href="#header" id="goto-top" class="dno"><img src="./images/UpCircle-32.png" alt="TOP" /></a>
style.css ( 자신이 사용하는 메인 style )
#goto-top{position:fixed;bottom:20px;right:20px}
.dno{display:none}
tail.php
<script src="스크립트 경로/grz_top.js"></script>
또는
<script>
$( document ).ready(function() {
var offset_top = 250;
var scroll_duration = 600;
var $go_to_top = $('#goto-top');
$(window).scroll(function(){
( $(this).scrollTop() > offset_top) ? $go_to_top.removeClass('dno') : $go_to_top.addClass('dno');
});
$go_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_duration
);
});
});
</script>
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 3개