[jQuery 활용하기] 03. jQuery 2

음악 스트리밍 사이트 III

 

HTML 파일을 보시면 'to-top-btn'이라는 클래스의 버튼이 있습니다.

 

.to-top-btn {
display: none;
}

 

하지만 현재로서는 버튼이 display: none;으로 숨어 있기 때문에 보이지 않습니다. 사용자가 스크롤을 해서 사이트의 맨 밑으로 내려가면 이 버튼이 서서히 나타나도록 해주세요. 이 버튼을 누르면 다시 맨 위로 스크롤되면서 버튼은 다시 사라집니다.

---

 

 

 

function scrollHandler() {

    var windowBottom = $(window).scrollTop() + $(window).height();

    // each문 사용
    $('.playlist').each(function() {
        var playlist = $(this);
        var playlistHalf = playlist.position().top + playlist.outerHeight() / 2;

        if(playlistHalf < windowBottom) {
            playlist.animate({'opacity': '1'}, 1500);
        }

    });

    if (windowBottom == $(document).height()) {
        $('.to-top-btn').fadeIn();
    } else {
        $('.to-top-btn').fadeOut();
    }

}

$(window).on('scroll', scrollHandler)

scrollHandler();

$('.to-top-btn').on('click', function() {
    $('html, body').animate({scrolltop: 0}, 1000);
});

---

본 내용은 Codeit의  'jQuery' 강의를
참고하여 작성한 내용입니다.