앵커 링크걸기!

1️⃣ js를 활용하여 링크 거는 방법

html ✅

<a href="" class="project-card" data-pos=".sc-project">                               <span>Project</span>
<span class="number">01</span>
</a>

<a href="" class="study-card" data-pos=".sc-study">
<span>Study</span>
<span class="number">02</span>  
</a>

<a href="" class="contact-card" data-pos=".sc-contact">                      <span>Contact</span>
<span class="number">03</span>
</a>

JS ✅

$('a').click(function(e){
e.preventDefault();
targetPos = $(this).data('pos');
resultOffset = $(targetPos).offset().top;
window.scrollTo({top:resultOffset,behavior:'smooth',});
})

-> data('pos')는 임의로 변경이 가능하다

2️⃣ a태그에 직접링크를 거는 방법

<a href="#project" class="project-card"> 
<span>Project</span>
<span class="number">01</span>
</a>

<a href="study" class="study-card">
<span>Study</span>
<span class="number">02</span>  
</a>

<a href="contact" class="contact-card">  
<span>Contact</span>
<span class="number">03</span>
</a>

-> 이동하고자 하는 section에 Id를 동일하게 주어서 링크를 걸어준다! css에 html{scroll-behavior:smooth}는 필수!
-> 이 소스를 활용하여 최상단으로 올려주는 button도 html과 css만으로도 구성이 가능하다.