JSFiddle - React, Tailwind, and code Playground

by Kerri Devine

HTML

<body>
    <div id="scroll_navigation">
        <p>Catch any clicks in "#scroll_navigation" to scroll the list item to the top of the page</p>
        <div class="container">
            <ul>
                <li><a href="#Portfolio" title="">1</a></li>
                <li><a href="#Services" title="">2</a></li>
                <li><a href="#About" title="">3</a></li>
                <li><a href="#Contact" title="">4</a></li>
                <li><a href="#Portfolio" title="">5</a></li>
                <li><a href="#Services" title="">6</a></li>
                <li><a href="#About" title="">7</a></li>
                <li><a href="#Contact" title="">8</a></li>
                <li><a href="#Portfolio" title="">9</a></li>
                <li><a href="#Services" title="">10</a></li>
                <li><a href="#About" title="">11</a></li>
                <li><a href="#Contact" title="">12</a></li>
                <li><a href="#Portfolio" title="">13</a></li>
                <li><a href="#Services" title="">14</a></li>
                <li><a href="#About" title="">15</a></li>
                <li><a href="#Contact" title="">16</a></li>
                <li><a href="#Portfolio" title="">17</a></li>
                <li><a href="#Services" title="">18</a></li>
                <li><a href="#About" title="">19</a></li>
                <li><a href="#Contact" title="">20</a></li>
                <li><a href="#Portfolio" title="">21</a></li>
                <li><a href="#Services" title="">22</a></li>
                <li><a href="#About" title="">23</a></li>
                <li><a href="#Contact" title="">24</a></li>
                <li><a href="#Portfolio" title="">25</a></li>
                <li><a href="#Services" title="">26</a></li>
                <li><a href="#About" title="">27</a></li>
                <li><a href="#Contact" title="">28</a></li>
                <li><a href="#Portfolio" title="">29</a></li>
                <li><a href="#Services" title="">30</a></li>
    ...

JavaScript

$('#scroll_navigation ul li').click(function() {
    var distanceToBottom = $('#scroll_navigation').scrollHeight - $('#scroll_navigation').height() - $('#scroll_navigation').scrollTop();
    
    if ($(this).position().top > distanceToBottom) {
        $('#white-space').height($(this).position().top);
    }
    $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});