목차 클릭 시, 해당 위치로 부드럽게 이동
본문
게시글마다 상단에 목차가 있어요.
(예)
https://homzzang.com/b/free-5017
이 목차를 클릭해 해당 부위로 이동하면 좋겠단 의견 있어서
틈틈이 시간날 때마다 해당 기능 추가 작업 해보려고 하는데,
해당 기능을 구현 위한 좋은 아이디어가 안 떠오르네요.
일단 이 기능을 구현하려면,
1.
목차에 링크 걸고 링크마다 아이디를 부여해야 할 것 같고,
(※ 웹에디터로는 아이디 작성 안 되네요. 수정 모드에선 보이는데, 확인 누르면 사라져요.)
(※ 아이디 형식을 어떻게 해야 게시글마다 중복 안되고 짧게 표현 가능할까요?)
2.
스크립트 경우도 게시글마다 다 개별적으로 넣을 수 없는 노릇이라,
(※ 링크의 아이디를 자동으로 인식시켜야 할 것 같은데, 좋은 아이디어가.. ㅡㅡ,
(※ 오직 목차 링크에 대해서만 작동되게.....).
이 기능을 구현 위한 좋은 아이디어 있으시거나 아시는 좌표 있으시면 소개 부탁드립니다.
구글링 해보니, 관련 기능을 구현 위한 소개글은 많은데,
제 경우처럼 게시글마다 처리해야 하는 경우는 없더라구요.
최대한 DB를 절약하면서, 간단하게 구현할 수 있는 좋은 아이디어 있으시면 제안해 주세요. ^^
PS.
사용중인 에디터는 CHEditor5 이고, 게시판 스킨은 배추베이직입니다.
답변 8
텍스트를 찾아서 하이라이트 시켜주는 자스플러그인을 응용해봤습니다. 게시판 글쓰기 기능안에서 목차랑 컨텐츠랑 연결할 매개를 설정하려면 코어를 건드려야하니 그냥 목차의 텍스트랑 똑같은 다음 텍스트를 찾아서 이동시켜주는걸로 될거같네요. 아이디, 클래스 넣어서 연결해도 다 필터링 되니까요.
목차의 제목에 에디터의 링크를 걸어주시고 주소는 아무거나(어차피 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>
아래 주소에 적용해봤습니다. 원하시는게 이런거일려나 모르겠네요.
아주 좋은 팁 감사합니다.
가장 간단해 보여서 가장 먼저 테스트해봤는데,
제 능력으로는 해결 불가 문제가...^^;;
현재 적용된 코드가 $("#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 태그를 기준으로) 설정되게 하여 뷰어에서 따로 스크립트를 이용하고 에디터에서 미리보기 형태로 제공하는 경우가 많습니다.
https://www.cssscript.com/demo/smooth-scroll-easing/#bazinga
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1
이런 효과는 어떠한가요?
저는 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] 를 넣고..
헤딩 #, ##, ### 을 사용해서 글을 작성하면 알아서 들여쓰기까지 됩니다.
많은 분들이 답변주셨네요. 모두들 감사합니다.
채택은 제가 충분히 답변들 검토/공부해 본 후 결정할 게요.
지금은 어느 게 가장 좋은 건지 모르겠어서...^^;;;;
