[jquery] ScrollTop 버튼

안녕하세요:)

 

오늘은 웹페이지를 만들면서 

늘 헷갈려하는, 찾아보게 만드는

[ ScrollTop ] 버튼을 만들어 봐요.

 

$(window).scroll(function() {
    if ($(this).scrollTop() > 150) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});
    
$(".scrollup").on('click', function (e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    }, 600);
    return false;
});

 

사실 저도 엄청 검색 많이 해서

다른 분이 만든 걸 갖다 써요~

 

 

웹페이지 만들다 보면 플러그인 쓰기는 애매하고

만들기는 해야 되는데...

뭐더라....라고 생각이 안 날 때가 많아요.

 

그리고 [ ScrollTop ] 버튼은 웹페이지마다 

대부분 사용되는 버튼이죠.

 

이 스크립트는 총 두 가지입니다.

 

첫 페이지에서는 보이지 않아요.

스크롤해서 밑으로 내려가면

그때 [ ScrollTop ] 버튼이 보이게 돼요.

 

 

저는 스크롤해서 100만큼 내려가면 보이게 해 뒀어요 

조금만 스크롤해도 [ ScrollTop ] 버튼이 보인답니다.

 

그리고 [ ScrollTop ] 버튼을 누르면

맨 위로 올라가게 됩니다.

 

이번에 작업을 하며 또 폭풍 검색을 했어요.

매번 이렇게 검색하느니 

--> ~내가 커닝노트에 쓰겠다

라는 생각이 들더라고요.

 

코딩 ~~ 파이팅!!입니다.