버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) 페이지 새로고침
우측 퀵메뉴 버튼을 클릭하면 원하는 곳으로 부드럽게 이동 하고, 스크롤 이동시 해당 영역에 위치하면 우측버튼이 영역에 맞게 활성화 됩니다.
* 참고로 스크롤 될만큼의 내용이 페이지에 있어야 효과가 더 잘 나타납니다.
스타일은 본인에 맞게 수정해주세요.
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);
}
}
해당 팁이 유용했다면, 눌러주세요.