상단으로 가기란?
사이트 우측 하단에 위치 하며 클릭시 최상단으로 이동 합니다.
동영상 설명
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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 24318 | |
| 24317 | |
| 24315 | |
| 24309 | |
| 24294 | |
| 24293 | |
| 24277 | |
| 24262 | |
| 24260 | |
| 24253 | |
| 24251 | |
| 24236 | |
| 24233 | |
| 24228 | |
| 24226 | |
| 24221 | |
| 24214 | |
| 24203 | |
| 24201 | |
| 24199 | |
| 24196 | |
| 24195 | |
| 24194 | |
| 24192 | |
| 24191 | |
| 24187 | |
| 24185 | |
| 24183 | |
| 24172 | |
| 24168 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기