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

0

조회 수 : 578 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
미리보기 : https://www.webmini.net/anchor_tab 

script 소스

 

<script type="text/javascript"> 

$(document).ready(function(){ 

/* 탭 클릭 */

  $('.anchor_tab li a').on('click',function(){

   var anchorId = $(this).attr('data-anchor');

   // 스크롤 이동

   scroll_to_anchor_tab(anchorId);

   });

});

 // 탭 이동 - 부드러운 스크롤

    function scroll_to_anchor_tab(anchor_id,speed) {

        if( !speed ) var speed = 'slow';

        var a_tag = $("#"+anchor_id);

        if(a_tag.length > 0){

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

                scrollTop: a_tag.offset().top - $('').height() -  $('').height() // 상단에 특정 위치를 제외하고 스크롤할때 해당 이름 작성

            }, speed);

        }

    }

</script>

 

html 소스

 

<ul class="anchor_tab">

<li><a href="#" data-anchor="anchor_div">버튼</a></li>

</ul>

 

버튼 anchor_div 이름은 원하는 이름으로 하되, 클릭 했을때 이동되는 id하고 이름이 같아야합니다.

 

<div id="anchor_div">

이동했을때 내용

</div>

태그
profile 글쓴이 빽짱구

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

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

첫번째 댓글을 남겨주세요!

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