그누보드 - 상단으로 가기 버튼 만들기
상단으로 가기란?
사이트 우측 하단에 위치 하며 클릭시 최상단으로 이동 합니다.
동영상 설명
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개
9년 전
이거 찾고 있었는데 . 감사합니다~~^^
llovemini
8년 전
찾고있었는데 감사합니다|
riggive
8년 전
감사합니다. 마침 필요하던건데 추천하고 갑니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2664 |
선택과집중
|
4개월 전 | 572 | |
| 2663 |
 GREENnBLUE |
4개월 전 | 620 | |
| 2662 |
GREENnBLUE |
4개월 전 | 574 | |
| 2661 |
선택과집중
|
4개월 전 | 508 | |
| 2660 | 4개월 전 | 588 | ||
| 2659 |
Modify
|
4개월 전 | 653 | |
| 2658 |
선택과집중
|
4개월 전 | 415 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
 레이딩솔루션 |
4개월 전 | 964 | |
| 2655 |
선택과집중
|
4개월 전 | 549 | |
| 2654 | 5개월 전 | 403 | ||
| 2653 |
선택과집중
|
5개월 전 | 585 | |
| 2652 | 5개월 전 | 394 | ||
| 2651 | 5개월 전 | 446 | ||
| 2650 |
선택과집중
|
5개월 전 | 327 | |
| 2649 |
선택과집중
|
5개월 전 | 423 | |
| 2648 | 5개월 전 | 441 | ||
| 2647 |
welcome
|
5개월 전 | 545 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 467 | ||
| 2644 |
선택과집중
|
5개월 전 | 513 | |
| 2643 | 5개월 전 | 456 | ||
| 2642 | 5개월 전 | 372 | ||
| 2641 | 5개월 전 | 358 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1358 | ||
| 2638 |
 마르스컴퍼니 |
5개월 전 | 511 | |
| 2637 |
세르반데스
|
5개월 전 | 398 | |
| 2636 |
선택과집중
|
6개월 전 | 568 | |
| 2635 |
선택과집중
|
6개월 전 | 682 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기