본문 바로가기
it,인터넷

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

by 낯선.공간 2021. 3. 24.

목차

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

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

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

    /* 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영역을 스크롤 탑하라는 뜻이겠죠?

    반응형