JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<ul class="secondmenu">
    <li><a href="http://www.bloggertrix.com/p/blogger-gadgets-and-widgets.html">Home</a>
    </li>
    <li><a href="http://www.bloggertrix.com/p/premium-services.html#phead">About</a>
    </li>
</ul>
<div class="first" id="firstt"></div>
<div class="second" id="phead"></div>

CSS

.first{
    height:500px;
    background-color:red;
}

.second{
    height:500px;
    background-color:green;
}

JavaScript

jQuery('.secondmenu a').click(function (e) {
    e.preventDefault();
    var target = this.hash;
    if (this.href != '#') {
        jQuery('html, body').animate({
            scrollTop: jQuery(target).offset().top - 60
        }, 1000);
    }
});


jQuery(document).ready(function (e) {
    var target = window.location.hash; //The hash property sets or returns the anchor part of a URL, including the hash sign
    if (typeof target != "undefined") { //Checks if the variable is undefined incase no hash property exists
        jQuery('html, body').animate({
            scrollTop: jQuery(target).offset().top - 60
        }, 1000);
        e.preventDefault();
    }
});