JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<div class="nav">
<a href="#sec-1" class="scroll-to">Scroll to 1</a>
  <a href="#sec-2" class="scroll-to">Scroll to 2</a>
  <a href="#sec-3" class="scroll-to">Scroll to 3</a>
</div>

<div id="sec-1" class="sec"></div>
<div id="sec-2" class="sec"></div>
<div id="sec-3" class="sec"></div>

CSS

.nav {
  height: 95px;
}

.sec {
  height: 400px;
}

#sec-1 {
  background: blue;
}

#sec-2 {
  background: orange;
}

#sec-3 {
  background: green;
}

JavaScript

$(".scroll-to").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) + ']');
            console.log(target, 'Offset: ' + target[0].offsetTop);
            console.log(target.offset().top - ($(".product__nav").outerHeight()));
            console.log('Offset: ' + target[0].offsetTop);
            console.log('Nav: ' + $(".product__nav").outerHeight());
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top //- ($(".product__nav").outerHeight())
                }, 1000);
                return false;
            }
        }
    });