Publish/JavaScript

TOP 위로가기 버튼 만들기

아2 2022. 6. 17. 23:37
    // top 버튼
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $(".btn_top").fadeIn();
        }
        else {
            $(".btn_top").fadeOut();
        }
    });

    $(".btn_top").click(function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

위 코드는 조금 자잘한 문제들이 있음.

아래 코드가 반응이 더 빠르고, 부드럽게 이동함.

 // top 버튼
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $(".btn_top").fadeIn();
        }
        else {
            $(".btn_top").fadeOut();
        }
    });

    $(".btn_top").click(function () {
      $('html, body').animate({
          scrollTop: 0
      }, 1000)
    });