jQuery addClass example

Change class name on click in jQuery

by Victor

HTML

<div data-jumper="hero">Hero</div>
<div data-jumper="about">About</div>
<div data-jumper="contact">Contact</div>

<div class="hero">hero</div>
<div class="about">about</div>
<div class="contact">contact</div>

CSS

.hero,
.about,
.contact {
  border: 1px solid red;
  height: 100vh;
}

JavaScript

$('[data-jumper]').on('click', function() {
  var linkVal = this.dataset['jumper'];
  var sectionClass = '.' + linkVal;
  var scrollVal = $(sectionClass).position().top;
  if (scrollVal) {
    console.log(scrollVal);
    $('html, body').animate({
      scrollTop: scrollVal
    }, 1400);
  };
})