제이쿼리 원하는 위치로 스크롤 이동하기..
본문
https://m.simsale.co.kr/product/10014635
방금전에 제가 글을 올렸는데 이미지로 올린것 보다.. 예시 사이트로 설명을 하는게 나을것 같아서..
결국엔 심쿵 할인 주소를 알아왔습니다..
위에 주소를 누르면 상세가 나와요
거기서 상품 정보를 누르면 스크롤이 아래로 내려가는데요
다른 탭버튼도 누르면 해당 위치로 고정이 되면서 스크롤 내려가게 구현하고 싶은데
아무리 해도 원하던게 구현이 안되서요
밑에 소스는 제가 구현을 했는데 버그가 있다보니.. 위에 들중 날쭝 올라갔다 내려갔다 이러거든요.. 어떻게 만들어야할지.. 알려주시면 감사히..ㅠㅠ
$('a[href*="#"]:not([href="#"])').click(function(event) {
let top_fixed = parseInt($('#dtabmenu').offset().top);
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top - 100
}, 500, 'swing');
}
}
});
답변 1
그냥 이동이라면..
<div class="tab-button">
<a href="#info">상품정보</a>
<a href="#review">상품후기</a>
</div>
<div id="info">상품정보내용</div>
<div id="review">상품후기내용</div>
이렇게만 해도될거 같고..
스크롤이동 효과가 있어야하면...
<script>
$(document).ready(function(){
$('.tab-button a').click(function(){
$h = $('.tab-button').height();
target=$(this).attr('href');
var offset = $(target).offset();
$('html, body').animate({scrollTop : offset.top - $h}, 400);
return false;
});
})
</script>
<div class="tab-button">
<a href="#info">상품정보</a>
<a href="#review">상품후기</a>
</div>
<div id="info">상품정보내용</div>
<div id="review">상품후기내용</div>
그대로입니다 ㅠㅠ
하.. 어떻게든 구현 했습니다 ㅋㅋㅋㅋㅋ 이것저것 응용 했더니.. 비슷하게 대처를 했는데 그래도 답변 달아주셨으니 감사합니다 채택할게요
답변을 작성하시기 전에 로그인 해주세요.
