HTML 태그 클릭시 앵커 이동

HTML 태그를 클릭시에 다른 태그로 이동하기 위한 방법을 소개하려고 합니다.

 

'도움이 됐어요' 버튼을 클릭할 경우에 태그 id가 'newNotice'인 경우로 이동해서 클라이언트에게 보여주기 위한 의도로 작성될 경우로 예를 들어보겠습니다.

 

1. href 태그를 이용

이 경우는 href 태그를 이용해서 간단하게 이동될 수 있는 경우 입니다.

<a href="#newNotice">도움이 됐어요</a>

<div id="newNotice">
  <!-- 이동할 위치 -->
</div>

 

2. onclick 이벤트와 script를 이용할 경우

이 경우는 앵커 이동시의 속도와 위치를 지정하여 사용할 수 있도록 합니다.

function으로 scrollToAnchor을 만들어 다른 곳에서도 사용할 수 있도록 모듈화를 제공합니다.

<span onclick="scrollToAnchor('#newNotice')">도움이 됐어요</span>

<div id="newNotice">
  <!-- 이동할 위치 -->
</div>

<script>
function scrollToAnchor(anchorId) {
  var anchor = document.querySelector(anchorId);
  if (anchor) {
    anchor.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }
}
</script>

위의 코드에서 scrollToAnchor 함수는 앵커로 이동하고 스크롤 위치를 조정하는 역할을 합니다. scrollIntoView 메서드의 block 속성을 'center'로 설정하여 앵커를 화면 중앙에 위치시킵니다. 'smooth' 값을 사용하면 부드러운 스크롤 효과를 제공합니다.

클릭 가능한 링크를 클릭하면 scrollToAnchor 함수가 호출되고, 해당 앵커로 부드럽게 스크롤하여 화면 중앙에 위치시킵니다.

이 방법을 사용하면 앵커로 이동할 때 맨 위가 아닌 중간 정도로 화면이 스크롤됩니다.

behavior에 대해서 좀 더 알아보면?

behavior 속성은 스크롤 동작에 대한 속도와 애니메이션 효과를 지정하는 데 사용됩니다. scrollIntoView 메서드에서 behavior 속성을 설정할 수 있습니다.

behavior 속성에는 다음과 같은 값들이 있습니다.

"auto": 기본값으로, 즉시 스크롤하여 앵커가 보이도록 합니다.
"smooth": 스무스한 애니메이션 효과와 함께 스크롤하여 앵커가 보이도록 합니다.
"smooth" 값을 사용하면 스크롤이 부드럽게 진행되어 앵커로 이동할 때 자연스러운 애니메이션 효과가 적용됩니다. 이는 스크롤이 일정한 속도로 진행되며 부드럽게 화면 중앙에 앵커가 위치하도록 합니다.

반면에 "auto" 값을 사용하면 스크롤이 즉시 발생하여 앵커가 보이도록 합니다. 부드러운 애니메이션 효과는 적용되지 않습니다.

즉, behavior: 'smooth'를 설정하면 스크롤 동작이 부드럽게 이루어지며, 앵커로 이동할 때 자연스러운 애니메이션 효과를 제공합니다.