티스토리 내부링크 클릭 시 부드럽게 스크롤되는 기능 적용 오류 해결

티스토리 블로그 운영을 하던 중 목차를 만들면 SEO에 도움이 된다고 하여 내 블로그에도 적용을 하였다. 자바스크립트 코드를 넣으면 아무래도 해당 코드가 실행되는 동안 사이트 로딩이 완료되는 시간이 지연될 것 같다는 생각이 들어서 직접 목차를 내부 링크를 한 땀 한 땀 입력하며 글을 썼다. 그런데 매번 글 쓸 때마다 하려니 은근히 시간이 걸리고 귀찮은 작업인걸 느끼고 결국 스크립트로 처리하기로 했다.

목차

티스토리 목차 자동으로 만들기

아래 블로그에서 목차를 만드는 코드를 그냥 복사해다가 썼다.
https://www.itple.co.kr/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%AA%A9%EC%B0%A8-%EC%9E%90%EB%8F%99-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B5%9C%EC%8B%A0

티스토리 목차 자동 만들기 최신

 

쓰다 보니 내부 링크 이동 시 갑자기 화면이 바뀌는 탓에 어리둥절한 느낌이 들 수도 있겠다는 생각이 들어 화면이 스크롤되어 이동하는 애니메이션 효과를 주는 편이 좋을 것 같았다. 인터넷에는 많은 코드들이 널려있으니 이것도 대충 검색해서 복붙 하기로 했다.

 

내부링크 이동 애니메이션 구현

내부링크 이동 애니메이션 코드는 아래 블로그에서 복사해서 썼다.
https://mmozzi.tistory.com/114

[티스토리 목차] 2. 내부 링크 스크롤 부드럽게 이동하기 (jQuery)

 

티스토리 내부링크 이동 애니메이션 오류 발생

그런데 해당 사이트에서는 되는 기능에 내 블로그에서는 제대로 동작하지 않는 것이었다. 클릭을 해도 꿈적도 하지 않았다.
참고로 문제가 발생하는 스킨은 북클럽 Book Club 스킨이었다.
아래는 문제의 코드이다.

jQuery(document).ready(function($) {
	// 내부링크 클릭 이벤트
    $("a[href^='#']").click(function(event) {
    	// 이벤트 기본 기능 해제
        event.preventDefault();
        // 클릭한 엘리먼트의 해시값 변수로 저장
        var target = $(this.hash);
        // 클릭한 엘리먼트로 스크롤 이동(숫자 500은 스크롤 속도이므로 적절히 수정해서 사용)
        $('html, body').animate({scrollTop: target.offset().top}, 500);
    });
});

 

티스토리 내부링크 이동 애니메이션 오류 분석

 

나는 구글의 신봉자로서 아무런 고민 없이 검색을 했지만, 해결방법을 찾을 수 없었고, 어쩔 수 없이 나는 스스로 해결을 해야만 했다.
우선 오류 확인을 위해 개발자 도구에서 오류가 발생하는지 확인을 했다.

 

jquery-1.12.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #%EC%B2%A0%EC%88%98
    at fa.error (jquery-1.12.4.min.js:2:12733)
    at fa.tokenize (jquery-1.12.4.min.js:2:18786)
    at fa.select (jquery-1.12.4.min.js:2:21594)
    at Function.fa [as find] (jquery-1.12.4.min.js:2:7320)
    at n.fn.init.find (jquery-1.12.4.min.js:2:24109)
    at new n.fn.init (jquery-1.12.4.min.js:2:24676)
    at n (jquery-1.12.4.min.js:2:406)
    at HTMLAnchorElement.<anonymous> (<anonymous>:4:22)
    at HTMLAnchorElement.dispatch (jquery-1.12.4.min.js:3:12444)
    at r.handle (jquery-1.12.4.min.js:3:9173)

역시 오류가 있었다.
Uncaught Error: Syntax error, unrecognized expression: #%EC%B2%A0%EC%88%98
#%EC%B2%A0%EC%88%98를 인식하지 못했다는 내용의 오류이다.
var target = $(this.hash);를 수행할 때 오류가 발생했고, this.hash의 값을 확인하면 #%EC%B2%A0%EC%88%98임을 확인할 수 있었다.
누가 봐도 %EC%B2%A0%EC%88%98는 RFC3986 방식으로 encoding 된 문자처럼 보인다. decode를 해보니 역시나 철수였다.
#철수로 되어야 할 문자가 #%EC%B2%A0%EC%88%98로 변환되어 발생한 문제였던 것이다. 영어나 숫자로 되어있을 때는 문제가 되지 않지만, 한글로 되어있어서 문제가 생기는 것 같다.

 

티스토리 내부링크 이동 애니메이션 오류 해결

 

그러면 해결방법은 간단하다.
%EC%B2%A0%EC%88%98를 철수로 고쳐주면 되는 것이다.

var target = $(this.hash);

위 코드를 아래와 같이 바꿔주기만 하면 간단하게 해결된다.

var target = $(decodeURI(this.hash));

 

이렇게 살짝 튜닝해주면 최종적으로 아래 코드로 문제없이 적용할 수 있다.

jQuery(document).ready(function($) {
    $("a[href^='#']").click(function(event) {
        event.preventDefault();
        var target = $(decodeURI(this.hash));
        $('html, body').animate({scrollTop: target.offset().top}, 500);
    });
});

 

내 스킨은 북클럽 Book Club 스킨이었으며, 다른 스킨은 해보지 않아서 모르겠지만 문제가 발생한다면 같은 방법으로 해결이 가능하리라고 본다.