Javascript: Check If Page Is At the Top

$(window).on('load', function() {  let scrollTop = document.documentElement.scrollTop;
  console.log('scrollTop', scrollTop);    let { left, top } = $('#abs').offset();    console.log('#abs top', top);
  if (scrollTop === 0) {    // We are at the top  } else {    // The page is scrolled down by scrollTop pixels
    // You can use this to scroll the page at the top after each load    setTimeout(() => {      window.scrollTo(0, 0);     }, 50);  }});

#abs {  position: absolute;  left: 100px;  top: 2000px;  width: 20px;  height: 20px;  background-color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Top of the page</h1><div style="margin-bottom: 2000px"></div><h1>Bottom of the page</h1>
<div id="abs"></div>

How to check if div reaches top of page for each div?

I found a jquery solution

function ScrollStart() {

var scrolled = $(this).scrollTop();


/*filter current element at the top with a certain class & give it active class*/

$('.step').removeClass('activetext').filter(function() {
     return scrolled <= $(this).offset().top + $(this).height() - 50 && scrolled >= $(this).offset().top - 50;
}).addClass('activetext');

/* make exclusion for first element */

var boven = $('.first').offset().top - $(document).scrollTop();

if (boven > 0){     
   $('.first').addClass('activetext');
} 

/*make exclusion for last element*/

var bottom = $('.last').offset().top - ($('.last').height()/5) - $(document).scrollTop();

if (bottom < 150){
    $('.step').removeClass('activetext')
   $('.last').addClass('activetext');
} 
else{ 
    $('.last').removeClass('activetext')
}

    /* give variable 'text' the text of the active class & append it */

var text = $('.activetext .headertekst').text();
$('.dropbtn').empty();
$('.dropbtn').append(text);
    $('.dropbtn').append('<img src="images/downarrow.svg" galleryimg="no"></img>');

}

Detect if the user scrolled to the top or the bottom of a UL

$().scrollTop() return how much element has been scrolled from top

$().innerHeight() return inner height of the element(without scroll)

DOMElement.scrollHeight returns height of the content of the element(with scroll)

$('#color-list').on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  if (scrollTop + $(this).innerHeight() >= this.scrollHeight) {
    $('#message').text('end reached');
  } else if (scrollTop <= 0) {
    $('#message').text('Top reached');
  } else {
    $('#message').text('');
  }
});

#message {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="color-list" style="height: 150px;overflow-y: scroll">
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Purple</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Black</li>
  <li>White</li>
</ul>
<div id='message'></div>

echo '  
<script type="text/javascript">
    if(window === top) {
document.write("<span><a href=\"./\">go-to-frame</a></span>");
    }
    else {
document.write("<span><a href=\"./index.php\">go-to-top</a></span>");
    }
</script>
';