jQuery addClass example

Change class name on click in jQuery

by Artem Borovikov

HTML

<div class="overflow">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo itaque cumque quod id in, suscipit nisi! Expedita unde accusantium, consectetur saepe laborum voluptatum illum architecto suscipit id, possimus est magnam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo itaque cumque quod id in, suscipit nisi! Expedita unde accusantium, consectetur saepe laborum voluptatum illum architecto suscipit id, possimus est magnam!</p>
    
    <div id="test">test</div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo itaque cumque quod id in, suscipit nisi! Expedita unde accusantium, consectetur saepe laborum voluptatum illum architecto suscipit id, possimus est magnam!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo itaque cumque quod id in, suscipit nisi! Expedita unde accusantium, consectetur saepe laborum voluptatum illum architecto suscipit id, possimus est magnam!</p>
    </div>
</div>

<div id="result">0</div>


<button id="click" >click me</button>

CSS

.overflow {
    position: relative;
    height: 150px;
    overflow-y: auto;
    border: 1px solid #000;
}

.inner {
    position: relative;
}

#test {
    height: 50px;
    background-color: red;
}

JavaScript

var offset = 0;

$('.overflow').scroll(function() {
	offset = $('#test').position().top;
	$('#result').text(offset);
})

$('#click').on('click', function() {
	$('.overflow').scrollTop(offset);
})