JSFiddle - React, Tailwind, and code Playground

by finfin

HTML

<div id="wrap">
    <div id="scroll2ToHere">UP ARROW scroll spot</div>1<br><br><br><br><br><br>2<br><br><br><br><br><br><br>3<br><br><br><br><br><br>4<br>
    <div id="scrollToHere">DOWN ARROW scroll spot 1</div><br><br><br><br>5<br><br><br><br><br>6<br><br><br><br><br>7<div id="scrollToHere2">DOWN ARROW scroll spot 2</div><br><br><br><br><br>8<br><br><br><br><br><br><br><br><br><br>END

</div>

CSS

#wrap {width:90%;height:270px;overflow-y:scroll;}

#scrollToHere {background:yellow;}
#scrollToHere2 {background:orange;}
#scroll2ToHere {background:pink;}

JavaScript

var hits = 0;
var spot1 = $("#scrollToHere2").position().top;
var spot2 = $("#scrollToHere").position().top;
$(document).keydown(function(e) {
    switch (e.which) {
    case 37:
        break;
    case 38:
    $('#wrap').animate({scrollTop:$("#scroll2ToHere").offset().top}, 1000); //up arrow key
        break;
    case 39:
        break;
    case 40:
                    if  (hits % 2 !== 0)
                    {
              $('#wrap').animate({scrollTop: spot1}, 1000); //bottom arrow key
                    }
                    else
                    {
              $('#wrap').animate({scrollTop: spot2}, 1000); //bottom arrow key
                    }
                   hits++;
            return false;
        break;
    }
})