<a href="/#01"> 이동이 안되는 문제
본문
안녕하세요. 그누보드를 사용하는 사이트이고 테마와 빌더는 사용하고 있지 않습니다.
홈페이지 공통 header에 <a href="/#01"> 라는 코드로 메인의 <id="01"> 섹션으로 이동하는 링크를 걸어두었습니다.
/sub/sub01.php 같은 다른 페이지에 있다가 <a href="/#01"> 링크를 클릭하면
메인의 <id="01"> 섹션으로 이동하지 않고
url이 https://sir.kr/#01 로 잠깐 보였다가 #01이 사라지더니
<id="01"> 섹션으로 이동하지 않고 메인페이지 상단으로만 보여집니다.
<a href="/index.php#01">
<a href="https://sir.kr/#01">
<a href="https://sir.kr/index.php#01">
같은 방식도 해보았지만 증상은 동일했습니다.
ㅠㅠ설명을 이해하셨을지 모르겠는데
이런 상황 겪어보신 분 계실까요? 해결방법이 궁금합니다.
답변 3
숫자로 시작하는 ID 가 문제가 되었을 가능성이 있습니다.
<a href="/#abc">
<div id="abc">
로 수정 후 테스트 해보면 어떨까 합니다.
HTML에서 #01 같은 앵커는 같은 페이지 내에서 DOM이 로드된 후에만 작동합니다. 그런데:
-
/sub/sub01.php→/index.php#01으로 이동하면 -
브라우저는
/index.php를 새로 로드하고, 그 후에#01로 스크롤하려고 시도합니다. -
하지만 그 시점에
id="01"요소가DOMContentLoaded이전에 없거나, 스크립트나 스타일에 의해 로딩 지연이 있으면, 자동 스크롤이 실패할 수 있습니다.
특히 #01 섹션이 스크립트로 동적으로 로드되거나, 로드 지연이 발생하는 구조일 때 이런 문제가 자주 발생합니다.
<script>
document.addEventListener("DOMContentLoaded", function () {
const hash = window.location.hash;
if (hash) {
// 약간의 딜레이 후에 스크롤 (지연 로딩 대응)
setTimeout(function () {
const target = document.querySelector(hash);
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
}, 300); // 필요시 500ms로 조정
}
});
</script>
위 스크립트 하단에 추가하면 구동됨
메인으로 이동할때만 url에서 #앵커 데이터가 사라지는데 이상하게 쿼리는 유지되어서
쿼리로 섹션 이동하도록 했습니다~
