JSFiddle - React, Tailwind, and code Playground

by Pasit R

HTML

<header>
    <h1>Top area</h1>
    <p>this header area shoul be fixed</p>
</header>
<div id="page">
    <div>
         <h2>Long content here</h2>
        <div>
            <ul>
                <li>....</li>
                <li>....</li>
                <li>....</li>
                <li>....</li>
                <li>....</li>
                <li>....</li>
                <li>....</li>
                <li>....</li>
            </ul>
        </div>
    </div>
    <div>
         <h3 id="target">Target area</h3>

        <div>some content</div>
    </div>
    <aside>
         <h3>Footer</h3>

        <div>.........</div>
        <div>.......</div>
        <div>.....</div>
        <div>end.</div>
    </aside>
</div>

CSS

#page {
    overflow-y: scroll;
    height: 180px;
}

JavaScript

$('#page').animate({
    scrollTop: $('#target').offset().top
}, 1000);