JSFiddle - React, Tailwind, and code Playground

by Dian Carlos Cabral dos Santos

HTML

<ul>

	<li class="item1" id="item1">Slide 1</li>
	<li class="item2" id="item2">Slide 2</li>
	<li class="item3" id="item3">Slide 3</li>
	<li class="item4" id="item4">Slide 4</li>
	
</ul>

SCSS

ul {
  
	list-style: none;
	padding: 0;
	margin: 0;
	
	li {
		
		height: 600px;
		
		&.item1 { background: #900; }
		&.item2 { background: #39f; }
		&.item3 { background: #06c; }
		&.item4 { background: #333; }
		
	}
  
}

JavaScript

$(document).ready(function(){

	// Detecta a distancia do topo da página até a li desejada
	var slide_principal = $('#item3').offset().top;
	
	// Faz a pagina rolar até a distancia detectada, ou seja, até a li
	$(window).scrollTop(slide_principal);

});