페이지내 앵커태그 적용했는데 새페이지로 열릴때 해결 방법
·
조회수 26
항상 하던대로 레퍼런스대로 페이지내 이동을 하게끔 적용을 했는데 새페이지로 열릴면서 뭔짓을 해도 안될때 임시로 자바스크립를 이용해 해결하는 방법입니다. 부트스트랩의 특정 컴포넌트의 오버로드가 원인이라고 하는데 추후에 해결하면 되고 일단 빠르게 해결할수 있는 방법을 적용해봅니다.
일반적으로 널리 알려진 레퍼런스 방식입니다.
<a href="#simple-list-item-1">알러지 정보</a>
<div id="simple-list-item-1">
<h2>알러지 정보</h2>
<p>내용</p>
</div>
자바스크립트로 함수를 만들어 클릭하면 이동을 하는 소스입니다.
<script>
function scrollToTarget(id) {
const element = document.getElementById(id);// id는 이동을 하려는 위치에 있는 태그의 id 값 입력
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
}
</script>
<button onclick="scrollToTarget('allergy-info1')">알러지 정보1</button>
<button onclick="scrollToTarget('allergy-info2')">알러지 정보2</button>
<div id="allergy-info1">알러지 정보1 내용</div>
<div id="allergy-info2">알러지 정보2 내용</div>