jQuery addClass example

Change class name on click in jQuery

HTML

<div id="line"></div>
<div id="container">
    <span id="text">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.

    </span>
<div>

CSS

#line {
    position: fixed;
    background-color: #ffef011f;
    height: 5px;
    top: 50%;
    width: 100%;
}

#container {
    text-align: center;
    margin-top: 500px;
    margin-bottom: 500px;
}

#text {
    color: #000;
    font: normal 12px/1.5 Courier New,monospace,Courier;
    white-space: pre;
    word-break: break-all;
    text-align: left;
    display: inline-block;
}

JavaScript

$(function() {
    var textEl = $('#text');
    var $w = $(window);
    var percentPos = 0.000;
    
    setInterval(function() {
        var currentPosX = window.scrollX || window.pageXOffset;
        var newPosY = textEl.offset().top-$w.height()/2+percentPos*textEl.height();
        window.scrollTo(currentPosX, newPosY);
        
        percentPos += 0.001;
        if (percentPos >= 1)
            percentPos = 0.000;
    }, 100);
    
})