테스트 사이트 - 개발 중인 베타 버전입니다

그누보드 - 상단으로 가기 버튼 만들기

· 9년 전 · 7983 · 3

상단으로 가기란?



사이트 우측 하단에 위치 하며 클릭시 최상단으로 이동 합니다.


동영상 설명


https://www.youtube.com/watch?v=4VQPBTMqH6M

 

 

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

 

 grz_top.js

 

 

<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년 전
이거 찾고 있었는데 . 감사합니다~~^^
찾고있었는데 감사합니다|
감사합니다. 마침 필요하던건데 추천하고 갑니다.

게시글 목록

번호 제목
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