자바스크립트 부드러운 top버튼 스크롤 이벤트

 

 

안녕하세요 

찐망고입니다.

 

스크롤을 내리다 보면 어느 틈인가 나타나는 탑버튼..

다시 스크롤을 올리면 사라지는데요

그거 해볼 거임

 

이전 탑버튼애니메이션도 참고해 주시고요

자바스크립트 top 버튼 애니메이션

 

 

 

jQuery

// top버튼 애니메이션
$(".topBtn").click(function() {
    $("html, body").animate({ scrollTop: 0 }, 500);
    return false;
}) 

// 스크롤 이벤트
$(".topBtn").hide();

$(window).on('scroll', function(){
    const scrollTop = $(window).scrollTop();
    const scrollOffset = $(".story").offset().top;

    console.log(scrollTop, scrollOffset)

    if(scrollTop < scrollOffset) {
        $(".topBtn").hide();
    } else {
        $(".topBtn").show();
    }
})

 

 

Javascript

// top버튼 애니메이션
const topBtn = document.querySelector(".topBtn");
topBtn.addEventListener("click", function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    return false;
});

// 스크롤이벤트
topBtn.style.display = "none";

window.addEventListener('scroll', function() {
    // pageYOffset은 현재 스크롤 위치를 가져오는 속성
    // 모든 브라우저가 지원하지 않을 수 있으므로 두 값중 하나라도 정의되어 있으면 그 값을 할당
    // window.scrollY가 window.pageYOffset과 동일한 값을 반환
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollOffset = document.querySelector(".story").offsetTop;

    console.log(scrollTop, scrollOffset);

    if (scrollTop < scrollOffset) {
    	topBtn.style.display = "none";
    } else {
    	topBtn.style.display = "block";
    }
});

 

이전 포스팅과 비교해 볼 때 top버튼 애니메이션 코드가 조금 다른데요.

이번 코드가 조금 더 간단하고 직관적이죠?

단점이라면 'smooth'는 최신브라우저에서 지원되지만, IE11 이전 버전에선 지원되지 않습니다.

머 지금이야 상관없겠죠?

 

아래 스크롤 이벤트 코드는 현재 스크롤 위치를 가져오는 것인데

일부 오래된 버전에서는 ' window.pageYOffset'이나 ' document.documentElement.scrollTop'을

지원하지 않을 수 있어 대비된 코드가 필요합니다.

 

 

아래는 수정된 코드입니다.

const topBtn = document.querySelector('.topBtn');
topBtn.style.display = "none";

function getScrollTop() {
    return window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

window.addEventListener('scroll', function() {
    const scrollTop = getScrollTop();
    const scrollOffset = document.querySelector(".story").offsetTop;

    console.log(scrollTop, scrollOffset);

    if (scrollTop < scrollOffset) {
        topBtn.style.display = "none";
    } else {
        topBtn.style.display = "block";
    }
});