목차 클릭 시, 해당 위치로 부드럽게 이동

목차 클릭 시, 해당 위치로 부드럽게 이동

QA

목차 클릭 시, 해당 위치로 부드럽게 이동

본문

게시글마다 상단에 목차가 있어요.

(예)

https://homzzang.com/b/free-5017

https://homzzang.com/b/css-1

 

이 목차를 클릭해 해당 부위로 이동하면 좋겠단 의견 있어서

틈틈이 시간날 때마다 해당 기능 추가 작업 해보려고 하는데,

해당 기능을 구현 위한 좋은 아이디어가 안 떠오르네요. 

 

일단 이 기능을 구현하려면,

 

1.

목차에 링크 걸고 링크마다 아이디를 부여해야 할 것 같고, 

(※ 웹에디터로는 아이디 작성 안 되네요. 수정 모드에선 보이는데, 확인 누르면 사라져요.)

(※ 아이디 형식을 어떻게 해야 게시글마다 중복 안되고 짧게 표현 가능할까요?)

 

2.

스크립트 경우도 게시글마다 다 개별적으로 넣을 수 없는 노릇이라,

(※ 링크의 아이디를 자동으로 인식시켜야 할 것 같은데, 좋은 아이디어가.. ㅡㅡ,

(※ 오직 목차 링크에 대해서만 작동되게.....).

 

이 기능을 구현 위한 좋은 아이디어 있으시거나 아시는 좌표 있으시면 소개 부탁드립니다.

구글링 해보니, 관련 기능을 구현 위한 소개글은 많은데,

제 경우처럼 게시글마다 처리해야 하는 경우는 없더라구요. 

 

최대한 DB를 절약하면서, 간단하게 구현할 수 있는 좋은 아이디어 있으시면 제안해 주세요. ^^

 

PS.

사용중인 에디터는 CHEditor5 이고, 게시판 스킨은 배추베이직입니다.

 

이 질문에 댓글 쓰기 :

답변 8

텍스트를 찾아서 하이라이트 시켜주는 자스플러그인을 응용해봤습니다. 게시판 글쓰기 기능안에서 목차랑 컨텐츠랑 연결할 매개를 설정하려면 코어를 건드려야하니 그냥 목차의 텍스트랑 똑같은 다음 텍스트를 찾아서 이동시켜주는걸로 될거같네요. 아이디, 클래스 넣어서 연결해도 다 필터링 되니까요.

https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

목차의 제목에 에디터의 링크를 걸어주시고 주소는 아무거나(어차피 preventDefault()로 이벤트 중지되니까요)넣어주시구요. 목차랑 연결 할 컨텐츠 앞부분에 반드시 목차의 제목이랑 똑같은 글을 써주시면 됩니다.



<?php
add_javascript('<script src="'.G5_JS_URL.'/jquery.highlight-5.js"></script>', 0);
?>
<script>
    $(document).ready(function () {
        $("#bo_v_con a").click(function (e) {
            e.preventDefault();
            var $wrap = $("#bo_v_con");
            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-100)
                    },
                    1200 //speed
                );



                $("span.highlight").removeClass('highlight');



                return false;

            }
        })
    })
</script>

아래 주소에 적용해봤습니다. 원하시는게 이런거일려나 모르겠네요.

http://sekti.net/bbs/board.php?bo_table=free&wr_id=9

아주 좋은 팁 감사합니다. 
가장 간단해 보여서 가장 먼저 테스트해봤는데,
제 능력으로는 해결 불가 문제가...^^;;

현재 적용된 코드가 $("#view_content a").click(function (e) { 이다보니,
본문의 모든 링크에 적용되서 결과보기 링크 같은 것도 먹통이 되네요.
그래서, 이 부분을 좀 개선해야 할 것 같은데...
"목차"라는 글이 써진 바로 다음의 blockquote 상자안의 a 태그에 대해서만 적용시키려면,
$("#view_content a") 부분을 어떤 식으로 수정하면 되는지요?

a태그에 클래스나 아이디를 줄수가 없어서 (줄려면 코어수정해야함) 링크주소로 구분해야할거 같네요. 에디터상에서 링크 거실때 기본적으로 http://까지 써지니 뒤에다가 예를 들어 aa.com만 넣는다고 치면요 아래처럼요.url주소로 구분해주시면 될거같네요

<script>
    $(document).ready(function () {
        $("#bo_v_con a").click(function (e) {

            var href = $(this).attr('href');
            if(href!='http://aa.com'){
                return true;
            }
            var $wrap = $("#bo_v_con");
            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-100)
                    },
                    1200 //speed

                );
                $("span.highlight").removeClass('highlight');
                return false;
            }
        })
    })
</script>

Table of Contents

Toc 로 검색하시면 관련 자료는 많이 나옵니다.

마크다운 문법에서는 헤더 파일을 목차로 이용하고 있으며

이동시 애니메이션은 jquery의 애니메이션으로
또는 css로도 가능합니다.

https://gomakethings.com/smooth-scrolling-links-with-only-css/

 

마크다운 에디터이긴 하지만 

https://code-farmer-i.github.io/vue-markdown-editor/senior/toc.html

toc의 예제를 참조해보세요.

 

보통 목차가 되는(heading 태그를 기준으로) 설정되게 하여 뷰어에서 따로 스크립트를 이용하고 에디터에서 미리보기 형태로 제공하는 경우가 많습니다.

저는 GET 으로 처리합니다.

URL 에 특정 #ID 나 .클래스 를 GET 으로 보내고


    <script type="text/javascript">
        $(document).ready(function(){
            var adptarget = $("<?php echo $_GET['adpxpoint']; ?>");
            $('html').animate({scrollTop : adpoffset.top}, 2000);
        });
    </script>

 

해당 클래스의 top 위치까지 스크롤 되는거죠.

따로 플러그인 쓰지 않아도 해당 클래스 혹은 아이디 상단까지 이동하는거니

추가로 margin-top 을 주어서 적당하게 조절하셔도 됩니다.

 

볼피드 님 글대로 마크다운 추천드립니다.  

 

링크글로 데모를 만들어 봤습니다.  https://docker.apachezone.com/test/21

 

테스트해 보면 원하는 위치에 [toc] 를 넣고..

헤딩 #, ##, ### 을 사용해서 글을 작성하면 알아서 들여쓰기까지 됩니다.

많은 분들이 답변주셨네요. 모두들 감사합니다.

채택은 제가 충분히 답변들 검토/공부해 본 후 결정할 게요.

지금은 어느 게 가장 좋은 건지 모르겠어서...^^;;;;

답변을 작성하시기 전에 로그인 해주세요.
전체 26
QA 내용 검색
filter #href ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT