• HTML
  • CSS
  • J볃교

JQUERY POSITION()을 이용한 특정 엘리먼트로 부드럽게 스크롤 이동하기

2018-11-14 329

설명

  • 카카오톡 링크

JQUERY POSITION()을 이용한 특정 엘리먼트로 부드럽게 스크롤 이동하기입니다.
현재 ajax으로 인하여 정상적으로 작동하지 않고있습니다 해당 링크로 가보시면 정확하게 나타납니다 :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.test_list_ul {display:inline-block; width:100%}
	.test_list_ul li {display:inline-block; }
	.test_list_ul li a {font-size:14px;}
	.scroll_box {display:inline-block; width:100%; height:200px; overflow-y:scroll}
	.scroll_box_in {display:inline-block; width:100%; height:500px;}
	.scroll_box_in span {display:inline-block; width:100%; margin-top:100px}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		
		$(".test_list_ul li a").on("click", function() {
			var move_point = $(this).attr("data-move");
			var right_now_scroll = $(".scroll_box").scrollTop();
			var move_point_top = $(".scroll_box").find("."+move_point).position().top;
			move_point_top = right_now_scroll + move_point_top;
			console.log(move_point+"/"+move_point_top  + "/" + right_now_scroll);
			$(".scroll_box").animate({scrollTop: move_point_top});
		});
	});
</script>
<ul class="test_list_ul">
	<li><a href="javascript:;" data-move="test_span_one">첫번째 글자로</a></li>
	<li><a href="javascript:;" data-move="test_span_two">두번째 글자로</a></li>
	<li><a href="javascript:;" data-move="test_span_three">세번째 글자로</a></li>
</ul>
<div class="scroll_box">
	<div class="scroll_box_in">
		<span class="test_span_one">
			테스트 글자입니다(1)
		</span>
		<span class="test_span_two">
			테스트 글자입니다(2)
		</span>
		<span class="test_span_three">
			테스트 글자입니다(3)
		</span>
	</div>
</div>