페이지 내에서 소제목들을 기준으로 하이퍼링크 기능 만들기(fragment, javascript)

블로그 스킨 작업을 하는 도중, 우측 사이드바가 허해서 무슨 기능을 쓸지 고민하다가, 페이지 내에서 fragment를 이용해서 하이퍼링크를 생성하도록 하였다.

 

 

페이지의 소제목들에게 id 부여

anchor 태그의 href에 #{fragment}를 해야 하는데, 요소의 id가 필요하다.

그러나, 매번 글을 작성 할 때마다 id를 일일히 부여하기에는 번거롭고, 기존의 글들까지도 그렇게 해야한다.

그래서, 페이지를 로딩하였을 때, id가 부여되도록 하였다.

 

게시글의 본문에서 h2, h3, h4태그를 불러오도록 하였다.

그리고 각각의 id를 각각의 텍스트로 하게 하였다.

const header = document.getElementsByClassName('article-desc')[0].querySelectorAll('h2, h3, h4');

for (let i = 0; i < header.length; i++) {
	header[i].id = header[i].innerText;
}

 

 

하이퍼링크 생성

하이퍼링크를 만들 영역 요소를 불러와서, 자식 요소들로 앵커 태그들을 만들어서 추가한다.

ul에 넣기 위해서, li 안에 a를 감싸기로 하였다.

createElement로 새로운 요소를 생성하여 하이퍼링크와 내부 텍스트를 넣어주었다.

appendChild로 요소 안에 자식 요소로 넣었다.

const inpage_nav = document.getElementById('inpage-navigator').querySelector('ul');
for (let i = 0; i < header.length; i++) {
	let item = document.createElement('li');
	let anchor = document.createElement('a');

	anchor.href = `#${header[i].id}`;
	anchor.textContent = header[i].id;
	item.appendChild(anchor);
	inpage_nav.appendChild(item);
}

 

 

요소 강조시키기

보너스로, 각 프래그먼트의 위치를 지나면, 오른쪽 사이드바의 네비게이션에서 해당 앵커가 강조되도록 하려고 한다.

또한, 마우스를 올렸을 때 강조시키기로 해보았다.

window.addEventListener('scroll', () => {
	for (let i = 0; i < header.length - 1; i++) {
		console.log(inpage_nav.children[i]);
		if (header[i].offsetTop <= window.scrollY && window.scrollY < header[i + 1].offsetTop) {
			inpage_nav.children[i].classList.add('fragment-reading');
		} else {
			inpage_nav.children[i].classList.remove('fragment-reading');
		}
	}
});

 

offsetTop을 이용해서, 맨 위 요소로부터의 거리를 알 수 있어서, 범위 내에 있을 때 강조용 클래스를 넣고 빼고를 반복할 수 있다.

저 클래스에는 그냥 볼드체로 변경시키는 것만 있다.

scrollY는 마우스 스크롤이 세로축으로 얼마나 내려왔는지를 알려준다.

#inpage-navigator .fragment-reading,
#inpage-navigator ul li a:hover {
    font-weight: bold;
}

 

 

이렇게 하면 끝!