JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
<a href="#1" id="go1" class="btn" data-anchor="relativeanchor">One</a>
<a href="#2" id="go2" class="btn" data-anchor="relativeanchor">Two</a>
<a href="#3" id="go3" class="btn" data-anchor="relativeanchor">Three</a>
<a href="#4" id="go4" class="btn" data-anchor="relativeanchor">Four</a>
</div>

<div class="col-md-12" id="1">
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="2">
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="3">
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="4">
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

JavaScript

$(function() {
	var scroll1 = $('#go1').offset().top;
	var scroll2 = $('#go2').offset().top;
	var scroll3 = $('#go3').offset().top;
	var scroll4 = $('#go4').offset().top;
	$(window).scroll(function() {
  	var scrollTop = $(this).scrollTop;
    if (scrollTop >= $('#1').offset().top) {
      $("#go1").hide();
    }
    if (scrollTop >= $('#2').offset().top) {
      $("#go1, #go2").hide();
    }
    if (scrollTop >= $('#3').offset().top) {
      $("#go1, #go2, #go3").hide();
    }
    if (scrollTop >= $('#4').offset().top) {
      $("#go1, #go2, #go3, #go4").hide();
    }
  });
});