id="#목차1" 이동시 스크롤 위치 조절
본문
목차를 만드는 중인데 이동하고자하는 위치에 id 를 줘서 이동하는데 이동하고나면 #부분이 화면 맨 상단에 딱붙어서 나오는데 중앙쪽으로 보여지도록 조절하는 방법이 있을까요?
위에 홈짱닷컴님의 목차 이동했을때 보여지는 것처럼요..
<div class="table-of-content">
<div class="toc_header">
<h2 class="toc_title">
글 제목
목차
</h2>
<span class="toc_toggle">
<a href="#" class="toggle_label" data-label="show">
숨기기(펼쳐보기)
</a>
</span>
</div>
<div class="toc_items toc_items-visible" style="display: block;">
<div class="toc_itemWrap">
<div class="toc_item">
<a href="#대목차">
<span class="toc_item_number">
1.
</span>
<span class="toc_item_label">
대목차
</span>
</a>
<div class="toc_itemWrap">
<div class="toc_item">
<a href="#중목차">
<span class="toc_item_number">
1)
</span>
<span class="toc_item_label">
중목차
</span>
</a>
<div class="toc_item">
<a href="#소목차">
<span class="toc_item_number">
-
</span>
<span class="toc_item_label">
소목차
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="articles">
<div class="main-title" id="#대목차">
<h2>1. 대목차</h2>
<p>내용</p>
</div>
<div class="main-title" id="#중목차">
<h3>2. 중목차</h3>
<p>내용</p>
</div>
<div class="main-title" id="#소목차">
<h4>3. 소목차</h4>
<p>내용</p>
</div>
</div>
답변 1
<script>
$(document).ready(function () {
$("#view_content a").click(function (e) {
// e.preventDefault();
var href = $(this).attr('href');
if(href!='#'){
return true;
}
var $wrap = $("#view_content");
var title = $(this).text();
$wrap.highlight(title);
var first_sch = $wrap.find('span.highlight').eq(1)
if(first_sch){
$("body,html").animate(
{scrollTop: first_sch.offset().top - (window.screen.height/2-230)},
500 //speed
);
$("span.highlight").removeClass('highlight');
return false;
}
})
})
</script>
에서
window.screen.height/2-230
이부분인것 같습니다.
답변 감사합니다. 시원하게 포기하기로 했습니당!
