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(){
	
  /* onsole.log(this.dataset['jumper']);
  console.log($('.about').position().top); */
  
  var linkVal = this.dataset['jumper'];
  var sectionClass = '.' + linkVal;
  var scrollVal = $(sectionClass).position().top;
  
  if(scrollVal){
    console.log(scrollVal);
$('html, body').animate({
        scrollTop: scrollVal
    }, 1400); 
  }



})