JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A" class="fullWidthBodyElement">
<a id="lnkA" href="#">Close me</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et quam elit. Cras imperdiet gravida ex, eu tempor erat consectetur non. Duis cursus fermentum magna vel aliquet. Donec pretium vel sem vel scelerisque. Morbi sed ante orci. Nullam eu ligula pulvinar, condimentum turpis a, tempor magna. Morbi non ex magna. Curabitur tincidunt sit amet leo sit amet ullamcorper.

Nullam non euismod sapien. Etiam congue ante ut vulputate blandit. Aliquam hendrerit dolor eros, sed vehicula justo fermentum sed. Phasellus rutrum malesuada elit. Donec ullamcorper tortor et facilisis luctus. Ut sapien elit, tristique id lacinia sed, luctus sed elit. Nullam consectetur justo at arcu iaculis, nec bibendum tortor luctus.

Etiam vel nunc eleifend, maximus ipsum ac, porta risus. Etiam at tellus sit amet mauris venenatis tristique. Vivamus volutpat bibendum arcu, non aliquam odio aliquet vitae. Nam sit amet vulputate nisl. Quisque lacinia aliquet elit rhoncus varius. Vivamus convallis odio ex, egestas tempus augue tempus non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur non sapien in magna tempus vestibulum. Ut quis tellus at elit imperdiet dignissim eu ac diam. Proin ut aliquet ante. Fusce vitae erat vehicula, accumsan diam non, vulputate risus. Ut scelerisque ullamcorper purus, in consectetur risus pellentesque in. Donec metus justo, suscipit et nulla id, rutrum pellentesque est. Curabitur commodo pharetra urna, quis posuere felis condimentum nec. Phasellus porta lectus velit, vitae aliquet elit auctor sit amet.

Cras sit amet metus dui. Sed facilisis tortor et nunc varius, eget tempor turpis mattis. Cras mollis nulla diam, at tempor sem tempor vel. Sed efficitur erat elit, id ultrices nibh pulvinar ac. Cras in dapibus metus, sed rutrum leo. Nam quis odio placerat, ornare magna ac, vestibulum nibh. Quisque ultricies lectus ac lectus luctus,...

CSS

#A { background-color:red; }
#B { background-color:green; }
#C { background-color:yellow; }

a { display:inline-block; font-weight:bold; font-size:2em; width:100%;}

JavaScript

$(document).ready(function(){

  $('#A').slideUp(0);

  $('#lnkA').click(function(){
      $('#A').slideUp(500);
  });

  $('#lnkB').click(function(){
    $('#A').slideDown(1000, function(){
        $('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);
    });
  });
  
  $('#lnkC').click(function(){
    $('#A').slideDown(1000, function(){
        $('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);
    });

  });
  
});


var el;
var elPos;
var clr;

$(window).scroll(function(){
	clearTimeout(clr);
  clr = setTimeout(function(){
	$('.fullWidthBodyElement').each(function(){
  	if ($(window).scrollTop() > $(this).offset().top && 
    		$(window).scrollTop() < $(this).offset().top + $(this).height()) {
					el = this;
					elPos = $(window).scrollTop() - $(this).offset().top;
    	}
		});
  },500);
});