jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
글 수 24
0
조회 수 : 465 신고 : 0
미리보기 : | 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);
}
}
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시

추천수에 따른 배경색 보기
본문으로 바로가기
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상

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