[html/css/jquery] 버튼 눌러 상단으로 이동하기 (3가지 방법!) /scroll-top

오늘은 페이지가 길어지면 나타나는 top버튼 작성 3가지 방법을 알려드리겠습니다!

 

 a href="#"태그를 활용하여 상단으로 올라가기

가장 간단한 방법이지만 추천하는 방법은 아니다!

'href' 링크를 주소를 쓰는 란에 '#'을 넣으면 튕겨져 맨 상단으로 올라간다. 하지만 웹접근성에는 맞지 않음!

 

영역 태그하기!

두번째로 간단한 방법이다 

header 혹은 제일 첫 번째 영역에 있는 id값을 a href=""안에 넣어 해당영역으로 끌고 가준다!

ex) a href="#header" / a href ="#home"

이렇게 했을때 css에 부드럽게 올라가도록 scoll-snap-type을 넣어주면 더 좋다!

scroll-snap-type: y mandatory;
-webkit-scroll-snap-type: y mandatory;

 

스크롤 위치 값 지정해 주기!

세 번째 방법도 간단하지만 jquery를 사용!

<a  href="header" id="#scroll-top"></a>

$("#scroll-top").on("click",function(){
$('html, body').animate({
scrollTop : 0
},400)
return false;
});

jquery를 사용하지만 가장 추천하는 방법입니다!