본문 바로가기
Dev/script

jquery로 페이지 상단으로 부드럽게 이동하는 탑 스크롤 버튼 만들기

by 하양동백 2021. 3. 5.

목차

    보통 탑스크롤이라고 부르는 버튼인데요.

    흔한 방식이지만, 가끔 떠 오르지 않아서 검색하시는 분들을 위해 올려둡니다.

    뭐~ 저도 가끔은 까먹어서 다시 생각해내는 일 없이 떠다 쓰려공....

    /* top 스크롤 */
    
    var speed = 500;
    $("a.top").css("cursor", "pointer").click(function(){
    $('body, html').animate(, speed);
    });

    speed 변수는 스크롤이 애니메이트 되어서 이동하는 속도를 지정해줬습니다.

    귀찮으면 그냥 변수 쓰지 말고 숫자로 바로 써도 됩니다.

    . css("cursor, "pointer")는 생략해도 무방하며, css자체에 a.top { cursor:pointer}로 작성해두어도 무방합니다.

    실질적인 핵심은 $('a.top')을 찾아서. click(function(){} 함수를 수행하라는 것이고, 그 수행할 내용은 $('body, html')을 찾아서 .animate(. speed); 0위 치까지 body영역을 스크롤 탑 하라는 뜻이겠죠?

    반응형

    댓글