JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="header">
    This is a fixed position header<br />It doesn't move when you scroll.
</div>

<div id="main">
    <div id="links-wrapper">
        <a href="#content-wrapper">This is the link before I fixed it.</a>
        <br /> 
        <p>Notice how it scrolls behind the header because that is the top of the page.</p>
        <a href="#content-scroller">This is the link AFTER I fixed it.</a>
        <br /> 
        <p>Notice how it scrolls behind the header because that is the top of the page.</p>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="content-scroller"></div>
    <div id="content-wrapper">
        <p>This is the content that you're scrolling to</p>
    </div>
</div>

CSS

body {
    min-height: 2000px;
}
#header {
    position: fixed;
    background-color: orange;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
}
#main {
    margin-top: 120px;
}
#content-scroller {
    position:absolute;
    bottom:70px;
    visibility: hidden;
}

JavaScript

/*
/
/
/
/
/
/ IGNORE THIS JAVASCRIPT
/ IT HAS NOTHING TO DO WITH THE FIX
/ IT'S ONLY HERE TO ANIMATE THE SCROLLING
/ SO YOU CAN SEE THAT THE FIRST LINK
/ GOES BEHIND THE HEADER
/
/
/
/
/
*/
$(function() {
    $('div#links-wrapper a').bind('click',function(event){
        var $anchor = $(this);
        
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });
});