JSFiddle - React, Tailwind, and code Playground

by ThiefMaster

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
<a class="scroll" href="#" data-scroll="+=200px">scroll down</a> | <a class="scroll disabled" href="#" data-scroll="-=200px">scroll up</a> | <a class="scroll" href="#" data-scroll="0">scroll top</a>

<div id="scroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet elit est. Donec ac congue sapien. Ut hendrerit adipiscing arcu quis tincidunt. Maecenas vel viverra tortor. Aliquam erat volutpat. In consectetur magna lobortis diam dapibus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales, diam quis aliquet tempor, diam urna vulputate justo, sit amet tristique dolor purus quis massa. Vestibulum ac eros tellus. Vivamus non mollis erat. Mauris lobortis porta rutrum. Sed sed rutrum elit. Nunc arcu enim, viverra quis ultrices vel, mattis eu urna.
</p>
<p>
Nulla quis urna a ligula congue ullamcorper non ac leo. Proin pellentesque ornare tortor id commodo. Mauris feugiat lobortis imperdiet. Nam ante ipsum, rhoncus nec tristique id, semper vel enim. Mauris elit justo, viverra feugiat pellentesque nec, convallis sed orci. Duis imperdiet fermentum pulvinar. Etiam placerat malesuada vestibulum. Nunc sit amet dolor est, mollis accumsan nulla. Ut diam urna, molestie sed gravida in, vulputate ac urna. Pellentesque lacus metus, molestie sed luctus eu, tristique sed felis. Curabitur at dapibus urna. Duis aliquet neque vel nulla auctor imperdiet. Suspendisse sodales facilisis augue vitae rhoncus. Suspendisse porta, lectus sed mattis vulputate, velit felis euismod ante, a accumsan enim quam at sapien.
</p>
<p>
Curabitur id erat lorem, nec pretium massa. Nulla egestas laoreet arcu, eget facilisis urna pulvinar sed. Maecenas blandit velit ut est porttitor elementum. Fusce vestibulum mollis metus sit amet iaculis. Sed eget tortor erat. Ut orci risus, porttitor non convallis ut, scelerisque mattis arcu. Praesent arcu nibh, congue sed tempus...

CSS

#scroll { height: 200px; overflow: hidden; border: 1px dashed #aaa; margin: 1em; }
p { margin-bottom: 1em; }
a.disabled { text-decoration: line-through; }

JavaScript

$('a.scroll').on('click', function(e) {
    e.preventDefault();
    var scrollSpec = $(this).data('scroll');
    var scrollArea = $('#scroll');
    scrollArea.scrollTo(scrollSpec, 800, {
        axis: 'y',
        onAfter: function() {
            var cur = scrollArea.scrollTop();
            var max = $.scrollTo.max(scrollArea[0], 'y');
            $('a:eq(0)').toggleClass('disabled', cur == max);
            $('a:eq(1)').toggleClass('disabled', cur == 0);
        }
    });
});