yeji

Top 버튼 만들기 본문

JavaScript

Top 버튼 만들기

yeji717 2021. 11. 15. 09:52

top버튼 몸체인 span을 하나 만든다...!

그리고 css로 예쁘게 꾸며주고, 동작하게 만들려면

span에게 id나 class를 준 뒤 그 값을 jquery에서 동작하게 만든다.

 

ex) span class = "top-btn";

 

$('top-btn').on('click',function(){

     const htmloffset = $('html').offset();

     $('html,body').animate({ scrollTop : htmloffset.top }, 400 );

});

 

html body 자체의 offset.top값을 구해서 탑 버튼을 클릭했을 때 제일 위로 올라가게끔한다.

단! 여기서 중요한건, animate를 써야 스르륵 움직이는 효과를 느낄 수 있다.

Comments