JSFiddle - React, Tailwind, and code Playground

by jchaplin2

HTML

<div style="height:50px;">
<a href="#1" class="infoTags" style=" padding: 5px; border-radius:5px;"> navbar tag 1</a>
<a href="#2" class="infoTags" style=" padding: 5px; border-radius:5px;"> navbar tag 2</a>
<a href="#3" class="infoTags" style=" padding: 5px; border-radius:5px;"> navbar tag 3</a>
<a href="#4" class="infoTags" style=" padding: 5px; border-radius:5px;"> navbar tag 4</a>
</div>

<div id="iddescription" style="border-style:solid; border-radius:5px; border-width:2px; border-color:rgba(0, 255, 0, 0.6); overflow:auto; word-wrap:break-word;height:130px;">

<p><span id="1" style="background:orange;">hi i am a title</span><br>hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. <br><br><span id="2" style="background:#00ff00;">hi i am a different title</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on.<br><br><span id="3" style="background:blue;">hi i the third title</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on.<br><br><span id="4" style="background:red;">the final title is me</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am...

JavaScript

$('.infoTags')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // On-page links
        if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
            location.hostname == this.hostname
        ) {
            // Figure out element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Does a scroll target exist?
            if (target.length) {
                // Only prevent default if animation is actually gonna happen
                event.preventDefault();
                var $currScrollTop = $("#iddescription").scrollTop();
                $('#iddescription').animate({
                    scrollTop: $currScrollTop + target.position().top - $('#iddescription').position().top
                }, 1000, function() {

                });
            }
        }
    });