테스트 사이트 - 개발 중인 베타 버전입니다

메뉴얼 스킨을 제작 중입니다. javcscript 위치 scrolltop 질문드립니다. 채택완료

로빈아빠 7년 전 조회 2,089

안녕하세요. 몇시간째 만들고 있는 스킨입니다.

1. 1-1. 2-2. 이런식으로 숫자를 포함해 제목과 설명을 달면

메뉴얼 형태로 모든 글을 한 화면에 표시하고 클릭하면 해당되는 위치로 이동시키는 방식입니다.

링크는 : http://howcode.co.kr/bbs/board.php?bo_table=manual1" target="_blank">http://howcode.co.kr/bbs/board.php?bo_table=manual1 이고 문제가 해결되면  sir.kr 에 배포하겠습니다.

테스트용 스킨을 자료실에 올려두었습니다. https://sir.kr/g5_skin/19382" target="_blank">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" target="_blank">http://howcode.co.kr/skin/board/ar.manual10/js/common5.js

   css 는 http://howcode.co.kr/skin/board/ar.manual10/css/list.manual5.css" target="_blank">http://howcode.co.kr/skin/board/ar.manual10/css/list.manual5.css

입니다.

 

관련 javascript 소스 코드는 다음과 같습니다.

 

</p>

<p>/*</p>

<p>//많이 알려진 위치 이동 스크립트</p>

<p> </p>

<p>// 왼쪽 목차 클릭 이벤트</p>

<p>$('.chapter_lst a[href^="#"]').on('click', function(event) {

    var $target = $(this.getAttribute('href'));

    if( $target.length ) {

        event.preventDefault();</p>

<p> </p>

<p>// 우측 메뉴얼 본문 부분의 해당 위치로 이동

        $('#manual_container').scrollTop();

        targetOffset = $target.offset().top;

    //alert(targetOffset);

        var top_pos=$target.offset().top

        $('#manual_container').animate({

            scrollTop: targetOffset + 'px'

        }, 1000);</p>

<p>        //targetOffset = $target.offset().top - $("element").outerHeight(true);

    }

});

*/</p>

<p> </p>

<p>// 전체 스크롤로 변경해서 테스트를 해봄 (좀 낮긴한데 그래도 오류)</p>

<p>$('.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;</p>

<p>

        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);

    }

});</p>

<p>

});</p>

<p>

 

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
7년 전

</p>

<p>var chapter = {};

$('[id^=chapter]').each( function() {

    chapter['#' + this.id ] = $( this ).offset().top - 145;

});</p>

<p>$('.chapter_lst a[href^="#"]').on('click', function() { 

   $('#manual_container').animate({

       scrollTop: chapter[ this.hash ] 

    }, 500);

});

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

로빈아빠

@logos @슈와이 두 분께 진심으로 감사드립니다.

직접 예제를 작성해주시고 올려주셔서 스킨에서 문제 된 부분을 해결 할 수 있게 되었습니다. 

두분 다 정답을 주셔서 채택을 해드려야 하는데.. 배포할 스킨에 직접 적용할 슈와이 님의 소스로 채택했습니다.  새해 복많이 받으세요., 감사합니다.^^

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

l
7년 전

bootstrap 로 메뉴, Footer 등을 넣고 해보니

로빈아빠께서 말씀하신 문제가 발생되었습니다

그리고 버튼을 클릭할때마다 

이미 이동되어 버린 엘리먼트의 위치가 달라져버려

현 위치로 이동하면 안되는 문제가 발생되네요

 

해서..

소스처럼 처음 로드할때는 원래의 좌표값을 갖고 있을것이기 때문에

해당 좌표값을 버튼의 속성에 넣어주고

이후엔 그 값으로만 이동하게 하니

잘되는것 같습니다

아래링크에서 강제로 위치이동 부분을 보시면 됩니다

예제 :  http://msos.kr/chapter.html" rel="nofollow noreferrer noopener" target="_blank">http://msos.kr/chapter.html 

 

더 좋은 방법은 다른 고수께서..

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

플래토
7년 전

일단 해결방법은 아니고

 

http://deb.kr/test/manual1.php#chapter-2" target="_blank">http://deb.kr/test/manual1.php#chapter-2

 

여기에서 보시면

 

문제점이 뭔지 확인가능하게  targetOffset2 를 표기해놨습니다.

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

l
7년 전

js 에 의존하지 않고 위치 이동이 되어야 하는것 아닌가요?

http://msos.kr/chapter.html" target="_blank">http://msos.kr/chapter.html

여기에서는 잘 됩니다만..

 

행여 다른 문제가 아닐까 조심스럽게 예상해 봅니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

로빈아빠
7년 전
@logos  예제까지 작성해주신 답변 감사합니다.
#name 으로 이동하면 목차를 포함한 전체 화면이 상단으로 이동되는 문제가 있어
목차와 상단 틀등 위치는 그대로 두고 설명서 본문 div 페이지만 스크롤 시키고자해서 #name 태그를 사용하지 않은것입니다.
좀더 방법을 찾아봐야 할듯합니다.^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인