홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

페이지 상단 이동 버턴 만들기

세상이야기      조회 수 83 추천 수 0 2018.12.23 11:00:12


많은 문서들이 너무 어렵게 설명한 것 같아서 기록 합니다.
아래 소스를 그대로 사용 하셔도 됩니다.

 

<html lang="ko">

  <head>

<meta charset="utf-8">

<title>이동버턴 만들기</title>

  </head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style>

a#MOVE_TOP_BTN {

position: fixed;

right: 2%;

bottom: 50px;

display: none;

z-index: 999;

}

</style>

<script>

$(function() {

$(window).scroll(function() {

if ($(this).scrollTop() > 500) {

$('#MOVE_TOP_BTN').fadeIn();

} else {

$('#MOVE_TOP_BTN').fadeOut();

}

});

$("#MOVE_TOP_BTN").click(function() {

$('html, body').animate({

scrollTop : 0

}, 400);

return false;

});

});

</script>

  <body>


<a id="MOVE_TOP_BTN" href="#">TOP</a>


  </body>

</html>



<a id="MOVE_TOP_BTN" href="#">TOP_go</a> 내용은 <body> 안에 아무곳이나 넣어도 됩니다.
이미지를 넣고자 하면, 글자부분에 이미지 URL 을 입력 합니다.
<a id="MOVE_TOP_BTN" href="#"><img src="http://www. 이미지가 있는 곳"></a> 


[간단설명]
    right: 2%; 버턴위치 지정(가로축)
    bottom: 50px;  버턴위치 지정(세로축)
    display: none; 버턴이 한 화면 이하일때 안보이게
    z-index: 999;   다른 테그보다 상위(같은 이름을 가진 테그가 존재할때)

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 이 부분은
반드시 입력 되어야 합니다. 아니면 파일을 다운로드 하여 자신의 계정에 올려서 URL 을 넣어도 됩니다.

List of Articles
번호 제목 글쓴이 날짜 조회 수
» 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 83
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 81
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 110
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1627
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3304
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2973
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1909
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1788
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1686
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2457
XE Login