If you want to scroll to items in a list, when clicking on a button, you can use jQuery.animate(), but don’t forget to do a .stop() before the .animate() to prevent jank.

https://plnkr.co/edit/PMvSmJ?p=preview

HTML

TypeScript

module spike {
    “use strict”;
   
    var _activeListItem: IListItem = null;   
    var _items: Array<IListItem> = [
        { sortOrder: 1, title: “Item 1” },
        { sortOrder: 2, title: “Item 2” },
        { sortOrder: 3, title: “Item 3” },
        { sortOrder: 4, title: “Item 4” },
        { sortOrder: 5, title: “Item 5” },
        { sortOrder: 6, title: “Item 6” },
        { sortOrder: 7, title: “Item 7” },
        { sortOrder: 8, title: “Item 8” },
        { sortOrder: 9, title: “Item 9” },
        { sortOrder: 10, title: “Item 10” },
        { sortOrder: 11, title: “Item 11” }
    ];
    var _list: HTMLDivElement = <HTMLDivElement>document.getElementById(“list”);
    var _$list = $(_list);

    export function getId(sortOrder: number): string {
        return “target” + sortOrder.toString();
    }

    export function onClickDown(evt: Event): void {
        evt.preventDefault();

        if (_activeListItem.sortOrder === _items.length) {
            return;
        }

        if (_activeListItem === null) {
            _activeListItem = _items[0];
        }

        removeActiveClass();
        _activeListItem = _items[_activeListItem.sortOrder];
        scrollTo(getId(_activeListItem.sortOrder));
    }

    export function onClickUp(evt: Event): void {
        evt.preventDefault();
        if (_activeListItem === null || _activeListItem.sortOrder === 1) {
            return;
        }
        removeActiveClass();
        _activeListItem = _items[_activeListItem.sortOrder – 2];
        scrollTo(getId(_activeListItem.sortOrder));
    }

    export function removeActiveClass(): void {
        var listItem = document.getElementById(getId(_activeListItem.sortOrder));
        listItem.classList.remove(“active”);
    }

    export function renderListItems(list: HTMLDivElement): void {
        var frag = document.createDocumentFragment();

        _items.map((item) => {
            var div = document.createElement(“div”);
            div.id = “target” + item.sortOrder.toString();
            div.classList.add(“list-item”);
            var content = document.createTextNode(item.title);
            div.appendChild(content);
            frag.appendChild(div);
        });

        list.appendChild(frag);
    }

    export function scrollTo(id: string) {
        var listItem = document.getElementById(id);
        listItem.classList.add(“active”);
        var offsetTop = listItem.offsetTop;

        _$list.stop().animate({
            scrollTop: offsetTop – 40
        }, 500);
    }

    renderListItems(_list);

    _activeListItem = _items[0];
    scrollTo(getId(_activeListItem.sortOrder));

    export interface IListItem {
        sortOrder: number;
        title: string;
    }
}

CSS

body {
    color: rgb(68, 68, 68);
    font-family: “Open Sans”, sans-serif;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu,
nav, section, summary, time, mark, audio, video {
    border: 0;
    border-image-width: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    padding: 0;
}

button {
    border: 1px solid rgb(126, 33, 109);
    background: none;
    color: rgb(126, 33, 109);
    cursor: pointer;
    outline: none;
    padding: 4px 4px 4px 4px;
    position: relative;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

button:hover {
    background-color: #dbe0e0;
}

.list {
    bottom: 40px;
    left: 0;
    margin: 1px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.list-item {
    height: 80px;
    margin: 10px;
    padding: 10px;
}

.title {
    margin-left: 20px;
    margin-top: 10px;
}

.footer {
    border-top: 1px solid rgb(126, 33, 109);
    bottom: 0;
    height: 40px;
    left: 0;
    padding-top: 6px;
    padding-left: 6px;
    position: absolute;
    right: 0;
}

.left {
    border: 1px solid rgb(126, 33, 109);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 50.5%;
    top: 0;
}

.right {
    border: 1px solid rgb(126, 33, 109);
    bottom: 0;
    left: 50.5%;
    position: absolute;
    right: 0;
    top: 0;
}

.wrapper {
    bottom: 20px;
    left: 20px;
    min-height: 300px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 40px;
}

.active {
    background-color: rgb(239, 222, 236);
}