JSFiddle - React, Tailwind, and code Playground

HTML

<div class="here"></div>

CSS

body {
	height: 2000px;
}
.here{
    position:absoulte;
    margin-top:1500px;
    background-color:red;
    height:150px;
    width:100%;
        

}

JavaScript

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 50;             
	// set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
        
         $('html, body').animate({
        scrollTop: $( ".here" ).offset().top
    }, 500);
        
        
	   $("body").css("background-color","#000");
    }
	else
	{
		$("body").css("background-color","#FFF");
	}
});