on keypress scroll

by Keval Bhatt

HTML

<div id="container">
    <div class="slide home scroll">.</div>
    <div class="slide profile">.</div>
    <div class="slide track">.</div>
    <div class="slide connect">.</div>
    <div class="slide value">.</div>
</div>

CSS

div.slide {
    width: 100%;
    height: 100% !important;
}
div#container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
.home {
    background-color: red;
}
.profile {
    background-color: purple;
}
.track {
    background-color: green;
}
.value {
    background-color: blue;
}
.connect {
    background-color: orange;
}

JavaScript

$(document).keydown(function (e) {
    // console.log($('[class ^=slide]'))

    if (e.keyCode == 37) {
        if ($('#container').find('.scroll').prev()[0]) {
            $("html, body").animate({
                scrollTop: $($('#container').find('.scroll').prev()[0]).offset().top
            }, 1000);
            console.log($($('#container').find('.scroll').prev()[0]).addClass('scroll'))
            console.log($($('#container').find('.scroll')[1]).removeClass('scroll'))
        } else {
            $("html, body").animate({
                scrollTop: $($('#container').children()[$('#container').children().length - 1]).offset().top
            }, 1000);
            $($('#container').children()[$('#container').children().length - 1]).addClass('scroll')
            $($('#container').find('.scroll')[0]).removeClass('scroll')


        }



    }
    if (e.keyCode == 39) {
        if ($('#container').find('.scroll').next()[0]) {
            $("html, body").animate({
                scrollTop: $($('#container').find('.scroll').next()[0]).offset().top
            }, 1000);
            $($('#container').find('.scroll').next()[0]).addClass('scroll')
            $($('#container').find('.scroll')[0]).removeClass('scroll')
        } else {
            $("html, body").animate({
                scrollTop: $($('#container').children()[0]).offset().top
            }, 1000);

            $($('#container').children()[0]).addClass('scroll')
            console.log($($('#container').children()[0]))
            $($('#container').find('.scroll')[1]).removeClass('scroll')
        }
    }
});