JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<!-- 
    Hello Andrea, welcome to one of my favorite 
    tools, JSFiddle.

    What you want to do is easy with jQuery.

    Starting off with HTML, any element with an id
    attribute can be clicked to. It is called an 
    anchor. <div id="hello"></div> will be "jumped" 
    to immediately if you clicked a link with the 
    href set to <a href="#hello">Link</a>. 
    
    Go below this pane to see the javascript

-->

<a href="#first">First</a>
<a href="#second">Second</a>
<a href="#third">Third</a>
<a href="#fourth">Fourth</a>

<div id="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ligula lorem, eu fermentum lorem. Sed a elementum diam. Vivamus sed diam orci. Nam nec nibh magna. Nam eros enim, feugiat non hendrerit sed, molestie nec libero. Praesent faucibus erat sit amet metus luctus placerat. Integer sed nisi nisl. Quisque ullamcorper sodales convallis. Sed consectetur hendrerit urna, eu egestas erat volutpat eget. Suspendisse vehicula interdum erat, et porta nibh egestas et. Duis at arcu dolor, sit amet sodales mi. Fusce sed dolor ante.</div>

<div id="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ligula lorem, eu fermentum lorem. Sed a elementum diam. Vivamus sed diam orci. Nam nec nibh magna. Nam eros enim, feugiat non hendrerit sed, molestie nec libero. Praesent faucibus erat sit amet metus luctus placerat. Integer sed nisi nisl. Quisque ullamcorper sodales convallis. Sed consectetur hendrerit urna, eu egestas erat volutpat eget. Suspendisse vehicula interdum erat, et porta nibh egestas et. Duis at arcu dolor, sit amet sodales mi. Fusce sed dolor ante.</div>

<div id="third">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ligula lorem, eu fermentum lorem. Sed a elementum diam. Vivamus sed diam orci. Nam nec nibh magna. Nam eros enim, feugiat non hendrerit sed, molestie nec libero. Praesent faucibus erat sit amet metus luctus placerat. Integer sed nisi...

CSS

div{
    border:1px solid red;
    margin:50px;
    margin-bottom:500px;
}

JavaScript

/**
 * With jQuery, I am capturing the click event of 
 * every link that begins with a hash (#) symbol.
 *
 * From there, I "preventDefault" the event
 * (so it doesnt "jump"). Then I get the links
 * hash (the #hello href), and look for an 
 * element with the id "hello", and I animate
 * to it's offset from the top.
 * 
 * This would go in your custom scripts javascript
 * file. If you need help next time you're in, just
 * IM me and I'll help ya.
 * 
 * Jacob
 */


$(document).on('click', '[href^="#"]', function(e){
    event.preventDefault();
    $('html,body').animate({
        scrollLeft:$(this.hash).offset().left - $('nav').width() - 20
    }, 1500, 'swing');
});