How to "fall in love" with the height of the block so that the button works?

Question

css

People, how can you dodge so that both the button works when scrolling, and the height of .page__wrapper, due to which the button stops working, remains 100vh?

(commented out in codepen height)

Answer 1

Just use .scrollTop not on the window, but on the .page__wrapper itself.

let amountScrolled = 100;

    $(".page__wrapper").scroll(function() {
      if ( $(".page__wrapper").scrollTop() > amountScrolled ) {
        $('.arrow-up').fadeIn('slow');
      } else {
        $('.arrow-up').fadeOut('slow');
      }
    });

    $('.arrow-up').on('click', function() {
      // alert(111);
      $('.page__wrapper').animate({
        scrollTop: 0
      }, 700);
      return false;
    });