jQuery addClass example

Change class name on click in jQuery

HTML

<div class="scroll_outer-wrapper">
    <div class="scroll_wrapper">
        <section class="scroll_section one">
          <h2>section 1</h2>
        </section>
        <section class="scroll_section two">
          <h2>section 2</h2>
          <div class="scroll_section two two_inner">
            <div class="move-on-scroll">
            <img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
          </div>
          <div class="move-on-scroll">
            <img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
          </div>
          <div class="move-on-scroll">
            <img src="https://images.unsplash.com/photo-1590336751349-f65720fee481?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" >
          </div>
          </div>
        </section>
        <section class="scroll_section three">  
          <h2>section 3</h2>
        </section>
        <section class="scroll_section four">
          <h2>section 4</h2>
        </section>
    </div>
</div>

<button id="scrollBtn">Click to Scroll</button>

SCSS

.scroll {
  &_outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
  }

  &_wrapper {
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    transition: transform .5s ease;
  }

  &_section {
    width: 100vw;
    height: 100vh;

    &.one{background: black; color: white;}
    &.two{background: white; color: black;}
    &.three{background: black; color: white;}
    &.four{background: pink; color: black;}
  }
}

#scrollBtn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: darkblue;
    color: white;
    border: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
}

.move-on-scroll {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  margin: 0 20px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.two_inner {
  display: flex;
}

JavaScript

var $scrollWrapper = $('.scroll_wrapper');
var $scrollBtn = $('#scrollBtn');

$scrollWrapper.scrollTop = 0;
$('#scrollBtn').on('click', function() {
   $scrollWrapper.scrollTop += 10;
});