JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<span id="scroll"></span>
<a href="#" id="warp">5000pxのところまでワープ</a>

<p id="target">おめあて</p>

CSS

body {
    height: 10000px;
}
#scroll {
    position: fixed;
    right: 0;
    top: 0;
}
#target {
    position: absolute;
    top: 4550px;
    
}

JavaScript

$('#warp').on('click', function(e) {
    e.preventDefault();
    
    $('body').animate({
        //documentからの位置を取得するoffset()
        scrollTop : $('#target').offset().top + 'px'
    },
    200,
    'linear',
    function(){
        alert('goal!!');
    });
});

//ただのscrollTop表示用
$(window).on('scroll',function() {
    $('#scroll').text( $(this).scrollTop() );
});