JSFiddle - React, Tailwind, and code Playground

by Vikrant Khuspe

HTML

<div id="page-wrap">

		<h1 id="top">Smooth Page Scrolling</h1>
		
		<ul>
		  <li><a href="#one">One</a></li>
		  <li><a href="#two">Two</a></li>
		  <li><a href="#three">Three</a></li>
		</ul>
		
		<h1 id="one">Section One</h1>
		
		<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae elit id tellus aliquam tincidunt. Mauris lectus elit, scelerisque nec maximus vel, mattis eget mauris. Sed vel porta ligula, et ultrices ligula. Vivamus dignissim diam at risus sodales, sed ultricies ligula bibendum. Pellentesque ullamcorper facilisis congue. Fusce quis dapibus purus, sed tincidunt dui. Donec condimentum iaculis nisl et egestas. Nunc viverra ultrices lacinia. Integer vulputate lacus nisl.</p>		
        <h1 id="two">Section Two</h1>
        
        <p><a href="#top">Top</a></p>

        <p>
Morbi pretium mi et enim tristique, id venenatis urna ullamcorper. Nunc quis massa nec erat vestibulum pellentesque. Nullam eu augue nec orci pellentesque pellentesque. Vestibulum id urna sed nibh aliquam scelerisque congue sed tellus. Donec venenatis, est vitae luctus varius, sapien justo efficitur risus, in vulputate diam lectus id sem. Suspendisse blandit urna eget mauris malesuada condimentum. In ac imperdiet tellus, at imperdiet nunc. Proin id augue ultrices, facilisis sem nec, suscipit lectus. Suspendisse placerat eleifend nunc, id pellentesque erat posuere id. Donec ut elementum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada tortor libero, et iaculis mauris consequat ut. Duis ac feugiat neque. Donec turpis leo, consequat eget purus eu, rutrum laoreet nulla. Nunc ut eleifend lectus.</p>
        
        <h1 id="three">Section Three</h1>
        
        <p><a href="#top">Top</a></p>

        <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et...

CSS

* {
		margin: 0;
		padding: 0;
	}
	body {
		overflow-x: hidden;
	}
	#demo-top-bar {
		text-align: left;
		background: #222;
		position: relative;
		zoom: 1;
		width: 100% !important;
		z-index: 6000;
		padding: 20px 0 20px;
	}
	#demo-bar-inside {
		width: 960px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	#demo-bar-buttons {
		padding-top: 10px;
		float: right;
	}
	#demo-bar-buttons a {
		font-size: 12px;
		margin-left: 20px;
		color: white;
		margin: 2px 0;
		text-decoration: none;
		font: 14px "Lucida Grande", Sans-Serif !important;
	}
	#demo-bar-buttons a:hover,
	#demo-bar-buttons a:focus {
		text-decoration: underline;
	}
	#demo-bar-badge {
		display: inline-block;
		width: 302px;
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent !important;
	}
	#demo-bar-badge a {
		display: block;
		width: 100%;
		height: 38px;
		border-radius: 0;
		bottom: auto;
		margin: 0;
		background: url(/images/examples-logo.png) no-repeat;
		background-size: 100%;
		overflow: hidden;
		text-indent: -9999px;
	}
	#demo-bar-badge:before, #demo-bar-badge:after {
		display: none !important;
	}

JavaScript

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});