jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
  • 웹미니 한줄 전광판 영역 입니다.
글 수 24
미리보기 :  

여러가지로 응용할수 있겠지만, top버튼을 클릭시 상단으로 부드럽게 이동되는 효과입니다.


먼저 웹문서 페이지 head와 head사이에 jquery 를 호출합니다. 여러곳에서 제공도 해주고, 직접다운받아서 호출해도 됩니다.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js "></script>

<script type="text/javascript" src="jquery.slideto.min.js"></script>


위에 jquery.slideto.min.js 파일은 첨부파일을 확인해주세요. 압축을 풀고 해당 js 문서를 호출하시면됩니다.


마찬가지로 head와 head사이에 아래소스를 삽입합니다.


<script type="text/javascript">

jQuery(function($){

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

$("#header").slideto({highlight: false});

});

});

</script>


여기에서 #body_top 은 top버튼에 id값입니다.

ex) <a href="#none" id="body_top">위로가기</a>


#header 은 '위로가기'를 클릭했을때 이동되는 id값입니다.

#body_top과 #header 은 정해진값이 아니니 사이트에 맞게 수정해주세요.


<div id="header"></div>


상단이 위처럼 header 로 감쌌다면 저값을 넣어주시면 됩니다.

꼭 top버튼이 아니더라도 여러 형태로 응용해보세요.

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/jquery/459670/fb7/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

chico (476356)

2012.10.21 20:27:25

먼저 좋은 자료 감사합니다 :)

올려주신 자료로 사용해봤는데요,

자동으로 스르륵 잘 올라갑니다만,

버튼을 클릭할때 헤더영역이 번쩍하면서

잠깐 나왔다 사라지고 슬라이딩 됩니다. (사파리 사용중입니다.)

어떻게하면 번쩍임 없이 사용가능할지...

조언부탁드립니다.

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
4 jQuery 부드러운 위로가기 탑(top) 버튼 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2012-08-30   6687
3 jQuery 종류별 효과 모음 title: [ani]깜빡이는 표정빽짱구 2012-03-02 1 7342
2 JQUERY js파일 불러오기~ [2] 늘푸른 2010-07-25 1 7054
1 JQuery 시작하기~ 늘푸른 2010-07-24 1 6544