JSFiddle - React, Tailwind, and code Playground

by fangunxs

HTML

<ul>
<li><a href="#Recognize">Recognize</a></li>
<li><a href="#EarlyBehavior">Early Behavior</a></li>
<li><a href="#Alienation">Alienation</a></li>
<li><a href="#DeterioratingHealth">Deteriorating Health</a></li>
<li><a href="#LifeConsequences">Life Consequences</a></li>
<li><a href="#Excuses">Excuses</a></li>
</ul>

<h2 id="Recognize" class="content_head"></a>Recognizing A Problem</h2><div id="TOC_TITLE_1" class="content_body">

<p>Recognizing an addiction problem can be harder than it
seems. Addicts are often skilled at hiding their behavior, even from their
closest friends and family members. Also, what may seem like an addiction could
be an experimental phase or how a given person copes with stressful
circumstances. But addiction is chronic and usually degenerative, or gets worse
over time. Without help in the early stages, an addiction may turn into a
debilitating and life-threatening condition.&nbsp; </p>

<p>No matter the type of addiction, it’s important to
recognize warning signs and seek help if necessary.</p>

</div>

<h2 id="EarlyBehavior" class="content_head"></a>Early Behavior</h2><div id="TOC_TITLE_2" class="content_body">

<p>In the early stages, a person might not show telltale signs
of a full-blown addiction. When it comes to common behaviors like drinking or
smoking, it may be that a person is simply using a substance socially or casually.
Therefore, it can be difficult to determine whether or not the behavior is
unhealthy or how long it might last. But, even in the early stages, some clues
may be present. Signs include:</p>

<ul><li>being particularly drawn to an
activity or substance</li><li>seeking out situations where the
substance or activity is present</li><li>episodes of binging or loss of
control</li></ul>

</div>

<h2 id="Alienation" class="content_head"></a>Alienation</h2><div id="TOC_TITLE_3" class="content_body">

<p>Once a person moves past experimenting or the early
phase of addiction, he or she will likely begin to alienate...

CSS

ul {
    overflow: hidden;
    list-style-type: none;
}
ul li {
    float: left;
    margin-left: 10px;
}

JavaScript

$("a[href*=#]:not([href=#])").on("click", function(e) {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            target = $(this.hash);
            target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");

            if (target.length) {
                if (typeof document.body.style.transitionProperty === 'string') {
                    e.preventDefault();
                  
                    var avail = $(document).height() - $(window).height();

                    scroll = target.offset().top;
                  
                    if (scroll > avail) {
                        scroll = avail;
                    }

                    $("html").css({
                        "margin-top" : ( $(window).scrollTop() - scroll ) + "px",
                        "transition" : "1s ease-in-out"
                    }).data("transitioning", true);
                } else {
                    $("html, body").animate({
                        scrollTop: scroll
                    }, 1000);
                    return;
                }
            }
        }
    });

    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function (e) {
        if (e.target == e.currentTarget && $(this).data("transitioning") === true) {
            $(this).removeAttr("style").data("transitioning", false);
            $("html, body").scrollTop(scroll);
            return;
        }
    });