메뉴얼 스킨을 제작 중입니다. javcscript 위치 scrolltop 질문드립니다.
관련링크
본문
안녕하세요. 몇시간째 만들고 있는 스킨입니다.
1. 1-1. 2-2. 이런식으로 숫자를 포함해 제목과 설명을 달면
메뉴얼 형태로 모든 글을 한 화면에 표시하고 클릭하면 해당되는 위치로 이동시키는 방식입니다.
링크는 : http://howcode.co.kr/bbs/board.php?bo_table=manual1 이고 문제가 해결되면 sir.kr 에 배포하겠습니다.
테스트용 스킨을 자료실에 올려두었습니다. https://sir.kr/g5_skin/19382
문제는 이렇습니다.
1) 왼쪽 목차를 클릭한다.
2) 목차에 <a href="#chapter-1" >1. 실시간 날씨 (latest 최근글)</a> 의 클릭이벤트를 처리해서
본문의 위치를 $('#manual_container').scrollTop(); 로 스크롤 시키는 형식입니다.
3) 본문의 스크롤 위치가 상단일때는 문제가 없는데 스크롤이 되면 해당되는 ID 위치를 못잡습니다. 한번더 클릭하면 또 변경되고... 이리저리 찾아보고 수정해보는데 만만치 않네요.. 스크립트 고수님들의 터치를 요청드립니다.
javascript 위치는 http://howcode.co.kr/skin/board/ar.manual10/js/common5.js
css 는 http://howcode.co.kr/skin/board/ar.manual10/css/list.manual5.css
입니다.
관련 javascript 소스 코드는 다음과 같습니다.
/*
//많이 알려진 위치 이동 스크립트
// 왼쪽 목차 클릭 이벤트
$('.chapter_lst a[href^="#"]').on('click', function(event) {
var $target = $(this.getAttribute('href'));
if( $target.length ) {
event.preventDefault();
// 우측 메뉴얼 본문 부분의 해당 위치로 이동
$('#manual_container').scrollTop();
targetOffset = $target.offset().top;
//alert(targetOffset);
var top_pos=$target.offset().top
$('#manual_container').animate({
scrollTop: targetOffset + 'px'
}, 1000);
//targetOffset = $target.offset().top - $("element").outerHeight(true);
}
});
*/
// 전체 스크롤로 변경해서 테스트를 해봄 (좀 낮긴한데 그래도 오류)
$('.chapter_lst a[href^="#"]').on('click', function(event) {
var $target = $(this.getAttribute('href'));
if( $target.length ) {
event.preventDefault();
targetOffset = $target.offset().top;
targetOffset2=targetOffset;
targetOffset2-=manual_posy;
if (targetOffset2<0)
{
targetOffset2 =targetOffset;
targetOffset2-=manual_posy;
targetOffset2+= $('#manual_container').scrollTop();
//- $('#manual_container').position().top;
// targetOffset + $('body').scrollTop();
}
else {
}
//targetOffset2=0;
//alert($('#manual_container').position().top);
//alert($('#manual_container').position().top);
var str=' targetOffset:'+targetOffset;
str+=' scrollTop :'+ $('#manual_container').scrollTop();
str+=' manual_posy :'+ manual_posy;
str+=' -> targetOffset2 :'+ targetOffset2;
//str+=' scrollHeight :'+ $('#manual_container').offset().scrollHeight;
//str+=' scrollHeight :'+ $('#manual_containeR').offset().scrollHeight;
//+ ' scrollTop :'+ $('#manual_container').scrollTop;
//alert(str);
targetOffset2-=20;
if (targetOffset2<0) targetOffset2=0;
max_height=$('.manual_doc').outerHeight(true);
if (targetOffset2>max_height) targetOffset2=max_height;
$('#manual_container').animate({
'scrollTop': targetOffset2 + 'px'
}, 500);
}
});
});
답변 5
var chapter = {};
$('[id^=chapter]').each( function() {
chapter['#' + this.id ] = $( this ).offset().top - 145;
});
$('.chapter_lst a[href^="#"]').on('click', function() {
$('#manual_container').animate({
scrollTop: chapter[ this.hash ]
}, 500);
});
js 에 의존하지 않고 위치 이동이 되어야 하는것 아닌가요?
여기에서는 잘 됩니다만..
행여 다른 문제가 아닐까 조심스럽게 예상해 봅니다
@logos 예제까지 작성해주신 답변 감사합니다.
#name 으로 이동하면 목차를 포함한 전체 화면이 상단으로 이동되는 문제가 있어
목차와 상단 틀등 위치는 그대로 두고 설명서 본문 div 페이지만 스크롤 시키고자해서 #name 태그를 사용하지 않은것입니다.
좀더 방법을 찾아봐야 할듯합니다.^^
일단 해결방법은 아니고
http://deb.kr/test/manual1.php#chapter-2
여기에서 보시면
문제점이 뭔지 확인가능하게 targetOffset2 를 표기해놨습니다.
bootstrap 로 메뉴, Footer 등을 넣고 해보니
로빈아빠께서 말씀하신 문제가 발생되었습니다
그리고 버튼을 클릭할때마다
이미 이동되어 버린 엘리먼트의 위치가 달라져버려
현 위치로 이동하면 안되는 문제가 발생되네요
해서..
소스처럼 처음 로드할때는 원래의 좌표값을 갖고 있을것이기 때문에
해당 좌표값을 버튼의 속성에 넣어주고
이후엔 그 값으로만 이동하게 하니
잘되는것 같습니다
아래링크에서 강제로 위치이동 부분을 보시면 됩니다
예제 : http://msos.kr/chapter.html
더 좋은 방법은 다른 고수께서..
@logos @슈와이 두 분께 진심으로 감사드립니다.
직접 예제를 작성해주시고 올려주셔서 스킨에서 문제 된 부분을 해결 할 수 있게 되었습니다.
두분 다 정답을 주셔서 채택을 해드려야 하는데.. 배포할 스킨에 직접 적용할 슈와이 님의 소스로 채택했습니다. 새해 복많이 받으세요., 감사합니다.^^
