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

html

<div class="anchor_area">
<div class="quick_pos">
<ul class="quick">
<li><a href="javascript:;" data-anchor="anchor_div1">버튼1</a></li>
<li><a href="javascript:;" data-anchor="anchor_div2">버튼2</a></li>
<li><a href="javascript:;" data-anchor="anchor_div3">버튼3</a></li>
</ul>
</div>
<div id="anchor_div1" class="anchor_div div1">
버튼1을 클릭했을때 이동했을때 내용
</div>
<div id="anchor_div2" class="anchor_div div2">
버튼2을 클릭했을때 이동했을때 내용
</div>
<div id="anchor_div3" class="anchor_div div3">
버튼3을 클릭했을때 이동했을때 내용
</div>
</div>

버튼 anchor_div1 이름은 원하는 이름으로 하되, 클릭 했을때 이동되는 id하고 이름이 같아야합니다. ex) <div id="anchor_div1">이동했을때 내용</div>

 

css

  .anchor_tab{margin:0;padding:0;overflow:hidden}
  .anchor_tab li{float:left;margin:0 5px}
  .anchor_tab li a{display:inline-block;height:30px;padding:0 15px;border:1px solid #999;border-radius:5px;background:#f4f4f4;box-shadow:0 0 5px #eee;color:#333;text-align:center;font-size:14px;line-height:30px}
  .anchor_tab li a:hover{border:1px solid #1e7ae2;color:#1e7ae2;text-decoration:none}
  .anchor_area{margin-bottom:10px}
  .anchor_div{height:500px;padding-top:250px;margin-bottom:20px;;font-size:15px !important;text-align:center}
  .anchor_div.div1{background:#eee}
  .anchor_div.div2{background:#448aca}
  .anchor_div.div3{background:#b3d465}
  .quick_pos{position:relative;width:100%;min-width:500px}
  .quick_pos .quick{position:absolute;top:50px;left:50%;z-index:60;margin-left:250px}
  .quick_pos .quick.fixed{position:fixed}
  .quick_pos .quick li a{display:block;width:30px;height:30px;margin-bottom:10px;border-radius:30px;border:2px solid #fff;background:#ccc;text-indent:-999em}
  .quick_pos .quick li a.on{background:#ff0000}

스타일은 본인에 맞게 꾸며주세요.

script

$(document).ready(function(){
  var $menu = $('.quick li a'),
  $contents = $('.anchor_area .anchor_div')
  $(window).scroll(function(){
  var scltop = $(window).scrollTop();
  $.each($contents, function(idx, item){
  var $target   = $contents.eq(idx),
  i = $target.index(),
  targetTop = $target.offset().top;
  if (targetTop <= scltop) {
  $menu.removeClass('on');
  $menu.eq(idx).addClass('on');
  }
  if (!(200 <= scltop)) {
  $menu.removeClass('on');
  }
  })
  });
 /* 탭 클릭 */
  $('.quick li a').on('click',function(){
  var anchorId = $(this).attr('data-anchor');
  // 스크롤 이동
  scroll_to_anchor_tab(anchorId);
  });
 // 퀵배너 스크롤
  $(window).scroll(function(){
  var quickPos = $('.quick_pos').offset().top;
  var winPos = $(window).scrollTop();
  if( winPos > quickPos ) $('.quick_pos .quick').addClass('fixed');
  else $('.quick_pos .quick').removeClass('fixed');
  });
  });
  // 탭 이동 - 부드러운 스크롤
  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);
  }
  }
태그
profile 글쓴이 빽짱구

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

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

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

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
24 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) title: [ani]깜빡이는 표정빽짱구 2019-03-29   72
23 버튼과 같은 이름의 레이어 띄우기 title: [ani]깜빡이는 표정빽짱구 2019-03-26   50
22 ajax로 호출시 jquery 실행이 안될때 title: [ani]깜빡이는 표정빽짱구 2019-01-04   67
21 jquery 탭메뉴 title: [ani]깜빡이는 표정빽짱구 2019-01-02   76
20 가로사이즈 구하기 title: [ani]깜빡이는 표정빽짱구 2018-11-06   53
19 jquery - 이미지 체크박스, 라디오 버튼 title: [ani]깜빡이는 표정빽짱구 2018-10-16   123
18 본문글 집중모드 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2018-10-09   170
17 스크롤 고정형 퀵배너 title: [ani]깜빡이는 표정빽짱구 2018-09-07   80
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: [ani]깜빡이는 표정빽짱구 2018-09-07   74
15 jquery 토글 기능 title: [ani]깜빡이는 표정빽짱구 2018-09-06   51
14 해당 영역 높이값 자동으로 가져오기 title: [ani]깜빡이는 표정빽짱구 2016-04-27   176
13 해상도별로 CSS호출하기 title: [ani]깜빡이는 표정빽짱구 2015-10-14   631
12 iscroll 사용시 동적일때 문제 title: [ani]깜빡이는 표정빽짱구 2014-02-20   3561
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2483
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: [ani]깜빡이는 표정빽짱구 2013-01-29 1 6868
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: [ani]깜빡이는 표정빽짱구 2012-10-22 2 5209
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3349
7 jQuery 로 레이어 드래그 하기 title: [ani]깜빡이는 표정빽짱구 2012-09-07   3370
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-07   4456
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-06 1 5541