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

버튼이나 텍스트 링크 클릭시 원하는 곳으로 부드럽게 이동하는 소스입니다. 앵커(?)와 같지만 애니메이션이 들어갔다고 보시면됩니다.


먼저 첨부 파일을 보시면 js폴더안에 두개의 js파일이 존재합니다. 원하는 위치에 복사하시고 호출하시면됩니다.


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

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


그리고 <head>안에 아래소스를 삽입합니다.


<script type="text/javascript">

var scrollTab = function (sObj) {

  $.scrollTo($("#" + sObj), 1000);

}

</script>


1000은 속도입니다. 수치가 작아질수록 이동속도가 빨라집니다.


그리고 <body>안에 클릭시 이동할 버튼이나 텍스트에 아래와 같이 작성합니다.


<a href="javascript:scrollTab('test');">이동</a>


버튼이 될수도 있고 텍스트가 될수도 있겠네요. test 는 원하는 네이밍으로 해주세요. 단 test를 클릭했을때 이동하는곳도 같은 이름이어야합니다.


test를 클릭했을때 이동될 곳을 아래처럼 합니다.


<div id="test">

이동되었을때 보여질 내용

</div>


아이디 값만 동일하면 됩니다.

태그
profile 글쓴이 빽짱구

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

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

댓글 '1'

디자인에이치큐 (556960)

2015.04.01 17:02:53

잘 보았습니다. 


^^

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
24 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: [ani]깜빡이는 표정빽짱구 2012-10-22 2 5349
23 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: [ani]깜빡이는 표정빽짱구 2013-01-29 1 6992
22 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-06 1 5626
21 jQuery 종류별 효과 모음 title: [ani]깜빡이는 표정빽짱구 2012-03-02 1 7418
20 JQUERY js파일 불러오기~ [2] 늘푸른 2010-07-25 1 7144
19 JQuery 시작하기~ 늘푸른 2010-07-24 1 6624
18 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) title: [ani]깜빡이는 표정빽짱구 2019-03-29   542
17 버튼과 같은 이름의 레이어 띄우기 title: [ani]깜빡이는 표정빽짱구 2019-03-26   246
16 가로사이즈 구하기 title: [ani]깜빡이는 표정빽짱구 2018-11-06   190
15 스크롤 고정형 퀵배너 title: [ani]깜빡이는 표정빽짱구 2018-09-07   381
14 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: [ani]깜빡이는 표정빽짱구 2018-09-07   578
13 해당 영역 높이값 자동으로 가져오기 title: [ani]깜빡이는 표정빽짱구 2016-04-27   445
12 jquery 토글 기능 title: [ani]깜빡이는 표정빽짱구 2018-09-06   251
11 해상도별로 CSS호출하기 title: [ani]깜빡이는 표정빽짱구 2015-10-14   880
10 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2613
9 iscroll 사용시 동적일때 문제 title: [ani]깜빡이는 표정빽짱구 2014-02-20   3710
8 jQuery 부드러운 위로가기 탑(top) 버튼 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2012-08-30   6807
7 ajax로 호출시 jquery 실행이 안될때 title: [ani]깜빡이는 표정빽짱구 2019-01-04   263
6 jquery 탭메뉴 title: [ani]깜빡이는 표정빽짱구 2019-01-02   298
5 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3518