jQuery addClass example

Change class name on click in jQuery

by CarambaMoreno

HTML

<div id="wrapper">
  
  <div class="hijo"><h1>adios</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo adios"><h1>adios</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  <div class="hijo"><h1>Hola</h1></div>
  
  </div>

CSS

body {
  padding: 0;
  margin: 0;
}

.hijo {
  background: lightgray;
  padding: 2rem;
  border-bottom: 1px solid white;
  }
  #wrapper { overflow-y: scroll; height: 100vh; }

JavaScript

jQuery( document ).ready(function($) {

$wrapper = $("#wrapper");
var adios = $(".adios").offset().top;

function scrollInfinito(){

	$('#wrapper').animate( {scrollTop: "+=100px"}, {
  duration: 1000,
  easing: "linear",
  progress: function() { 
  
  if ( $wrapper.scrollTop() >= adios ) {
     $wrapper.scrollTop(0);
     $wrapper.stop();
     scrollInfinito();
    }
    },
	complete: function() { scrollInfinito(); }
  
  } 
  


  )
} 
scrollInfinito();

})