<div>
<button id="button1">上から200px下の位置へスクロール</button>
<button id="button2">見出し1へスクロール</button>
<button id="button3">見出し2へスクロール</button>
</div>

<div>
  <h1>サンプル</h1>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <h2 id="heading1">見出し1</h2>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <h2 id="heading2">見出し2</h2>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
  <p>cccccccccccccc</p>
  <p>aaaaaaaaaaaaaa</p>
  <p>bbbbbbbbbbbbbb</p>
</div>
function Scroller( target, speed, interval ) {
    const   _MAX_POSITION   = target.scrollHeight - target.clientHeight;
    let     _timeoutId      = null;

    function _scrollByPosition( position ) {
        if ( _timeoutId !== null ) return;

        let currentPosition = target.scrollTop;
        if ( position > _MAX_POSITION ) position = _MAX_POSITION;
            
        const   DIRECTION   = position < currentPosition ? -1 : 1;
        const   MOVEMENT    = speed * DIRECTION;

        const onScroll = function() {
            currentPosition += MOVEMENT;

            const IS_COMPLETED =
                ( DIRECTION ===  1 && currentPosition >= position ) ||
                ( DIRECTION === -1 && currentPosition <= position )
            ;

            if ( IS_COMPLETED ) {
                target.scrollTop = position;
                _timeoutId = null;

                return;
            }

            target.scrollTop = currentPosition;
            _timeoutId = setTimeout( onScroll, interval );
        };

        onScroll();
    };

    function _scrollByElement( element ) {
        const POSITION = element.offsetTop;

        _scrollByPosition( POSITION );
    }

    return {
        scrollByPosition  : _scrollByPosition,
        scrollByElement   : _scrollByElement,
    };
};

const SCROLLER  = new Scroller( document.documentElement, 70, 15 );

const BUTTON_1  = document.getElementById( 'button1' );
const BUTTON_2  = document.getElementById( 'button2' );
const BUTTON_3  = document.getElementById( 'button3' );

const HEADING_1 = document.getElementById( 'heading1' );
const HEADING_2 = document.getElementById( 'heading2' );

BUTTON_1.addEventListener( 'click', function() {
    SCROLLER.scrollByPosition( 200 );
} );

BUTTON_2.addEventListener( 'click', function() {
    SCROLLER.scrollByElement( HEADING_1 );
} );

BUTTON_3.addEventListener( 'click', function() {
    SCROLLER.scrollByElement( HEADING_2 );
} );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.