JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<a class="Hlink">A</a>

<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<h1 class="Hlink">A</h1>

<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<h2 class="Hlink">A</h2>

<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<a...

CSS

.hlink {
    cursor: pointer;
    font-style: underlined;
}

JavaScript

$(function () {
    $(document).on('click', '.Hlink', function (ev) {
        $(document.body).animate({
            'scrollTop': $(ev.target).offset().top
        }, 2000);
    });
});