JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <title>fiddle scrollTop</title>
    
    
</head>
<body>
        
        
        <div id="cont">
        
            <div class="bloc top">
                <div class="anchor" id="anchor_1">You are here : Anchor 1</div>
                <div class="goto" rel="#anchor_2">JQ Go To #2</div>
                <div class="nativ" rel="#anchor_2">Native JS Go To #2</div>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
            </div>
            
            <div class="bloc bottom">
                <div class="anchor" id="anchor_2">You are here : Anchor 2</div>
                <div class="goto" rel="#anchor_1">JQ Go To #1</div>
                <div class="nativ" rel="#anchor_1">Native JS Go To #1</div>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
                <p>line</p>
            </div>
        
        
        </div>

    
    
    
</body>
</html>

CSS

#cont {
            background-color:#ccc;
        }
        
        .bloc {
            margin:1em;
            background-color:#fff;
        }
        .bloc p {
            margin:5em 1em;
        }
        .goto {
            cursor:pointer;
            width:100px;
            background-color:#afa;
            padding:1em;
            text-decoration:underline;
            margin:.5em;
        }
        .nativ {
            background-color:#aaf;
            cursor:pointer;
            width:100px;
            padding:1em;
            text-decoration:underline;
            margin:.5em;
        }
        .top {
            background-color:#fee;
        }
        .bottom {
            background-color:#eef;
        }

JavaScript

$(document).ready(function(){
            $('.goto').click(function() {
            
                var anchor = $(this).attr('rel');
                $('html,body').animate({ 
                    scrollTop: $(anchor).offset().top
                }, 560);
            });
            
            $('.nativ').click(function() {
                var anchor = $(this).attr('rel');
                var intScrollYanchor = $(anchor).offset().top;
                
                 // scrollTo method
                window.scrollTo(0, intScrollYanchor);
                
            });
        });