jQuery addClass example

Change class name on click in jQuery

HTML

<button id="trigger">Click me!</button>

<div id="content-1" class="content"></div>
<div id="content-2" class="content"></div>
<div id="content-3" class="content"></div>
<div id="content-4" class="content"></div>

CSS

.content {
    height: 400px;
}

#content-1 {
    background-color: red;    
}
#content-2 {
    background-color: green;    
}
#content-3 {
    background-color: blue;    
}
#content-4 {
    background-color: green;    
}

JavaScript

$('#trigger').on('click', function(ev) {
	var $item  = $('#content-3');
    scrollToDiv($item);
});

function scrollToDiv(e) {
    var el = e.attr('id');
    $('html, body').animate({
        scrollTop: $("#" + el).offset().top
    }, 300);
    console.log(el);
}