JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav"></div>
<div id="content">
    <p><a href="#" id="top">To Bottom</a></p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p><a href="#" id="bottom">To Top</a></p>
</div>

CSS

#nav {
    position : fixed;
    top      : 30px;
    right    : 10px;
}

JavaScript

jQuery(function ($) {
       var window_height = $(window).height(),
        num_of_pages = Math.ceil($('#content').height() / window_height),
        output       = '';
    
    for (var i = 0; i < num_of_pages; i++) {
        output += '<div><a href="#" data-scrollTop="' + (window_height * i) + '">' + (i + 1) + '</a></div>';
    }
    $('#nav').html(output).find('a').on('click', function (event) {
        event.preventDefault();
        $('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);
    });
    
    $('#top').on('click', function (event) {
        event.preventDefault();
        var top = $('p:last').offset().top;
        $('html').animate({scrollTop : top}, 750);
    });
    $('#bottom').on('click', function (event) {
        event.preventDefault();
        $('html').animate({scrollTop : 0}, 750);
    });
});