JSFiddle - React, Tailwind, and code Playground

HTML

<div class="submenu_left">
    <a data-direction="top" href="#top">Вверх</a>
    <ul class="submenu_links">
        <li>Ссылка 1</li>
        <li>Ссылка 2</li>
        <li>Ссылка 3</li>
        <li>Ссылка 4</li>
    </ul>
    <a data-direction="bottom" href="#bottom">В низ</a>
</div>

CSS

body {
    background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    height: 5000px;
}
.submenu_left {
    background: #fcfcfc;
    color: #020202;
    width: 300px;
    padding: 15px;
    position: fixed;
}
.submenu_left a {
    color: #020202;
    text-decoration: none;
    display: block;
    width: 300px;
    height: 30px;
    padding-top: 10px;
    border-bottom: 1px solid #020202;
}
.submenu_left ul {
    display: block;
    width: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.submenu_left ul li {
    display: block;
    cursor: pointer;
    width: 300px;
    height: 30px;
    padding-top: 10px;
    border-bottom: 1px solid #020202;
}

JavaScript

var scrollLinks = $('.submenu_left a');
var pageLinks  = $('.submenu_left li');
var scrollSpeed = 1200;

scrollLinks.click(function(e) {                      // Вешаем обработчик на кнопки, которые будут скролить страницу вверх и в низ
    e.stopPropagation();                             // Отключаем переход по ссылкам
    var linkDirection = $(this).data('direction');   // Получаем атрибут ссылки с направлением вверх или в низ
    console.log(linkDirection);
    if(linkDirection == 'top') {                     // Проверяем направление в переменной linkDirection
        $('html, body').animate({                    // Если top то скролим вверх до 0-го пиксела
            scrollTop : 0
        }, scrollSpeed);
        return false;
    }
    else {                                           // Если bottom то скролим вниз. По дефолту у жеквери нету метода для скрола в низ,
        $('html, body').animate({                    // в этом нам поможет $(document).height(). Эта штуковина выяснит нам высоту страницы
            scrollTop: $(document).height()         // и с помощью всё того же scrollTop мы опустимся до нужного уровня
        }, scrollSpeed);
        return false;
    }
});