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);
}