JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<a class="btn" href="#">ボタン</a>
<div class="area01"></div>
<div class="area01"></div>
<div class="area01"></div>
<div class="displayArea"></div>

SCSS

.btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: aqua;
  width: 100px;
  height: 25px;
  text-align: center;
  display: none;
}

.area01 { 
  height:750px;
}

.displayArea {
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

(function() {
  var scrollManager = (function() {
    
    function manageScroll() {
      var offsetY = $(window).scrollTop();
      $(".displayArea").html(offsetY);
    }

    function scrollTop($selector) {
      console.log("$selector:", $selector);
      toggleDisplay($selector);
    }

    function toggleDisplay($selector) {
      $selector.css({"display":"block"});
    }
    
    function addEventListeners() {
      $(window).on("scroll", manageScroll);

      $("a[href^='#']").on("click", function() {
        var $this = $(this);
        scrollTop($this);
      });
    }

    function init() {
      manageScroll();
      addEventListeners();
    }

    init();

    return;
  });

  function init() {
    scrollManager();
  }
  
  init();

}());