iScroll autoscroll methods

This demonstrates the scrolling options for iScroll on a playlist

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<input type="text" id="scrollTo" />  <button id="jumpEl">jump to element</button>
<button id="jumpPos">jump to position</button>

<div id="listDesigner_wrapper">
  <ul id="listDesigner">
    <li class="cell" id="KickListDesignerMain038331478410_cell_0" style="top:0px;">
      <div class="title">Title 0</div>
      <div class="description" >Description 0</div>
      <div class="background"></div>
      <div class="thumbnail" style = "background-image:url(http://thumb.mediasuite.multicastmedia.com/thumbs/tid/w100/h74/t1321304202/2764743.jpg)" ></ div >
    </ li >
    <li class="cell" id="KickListDesignerMain038331478410_cell_1" style="top:85px;">
      <div class="title">Title 1</div>
      <div class="description" >Description 1</div>
      <div class="background"></div>
      <div class="thumbnail" style = "background-image:url(http://thumb.mediasuite.multicastmedia.com/thumbs/tid/w100/h74/t1321304202/2764743.jpg)" ></ div >
    </ li >
    <li class="cell" id="KickListDesignerMain038331478410_cell_2" style="top:170px;">
      <div class="title">Title 2</div>
      <div class="description" >Description 2</div>
      <div class="background"></div>
      <div class="thumbnail" style = "background-image:url(http://thumb.mediasuite.multicastmedia.com/thumbs/tid/w100/h74/t1321304202/2764743.jpg)" ></ div >
    </ li >
    <li class="cell" id="KickListDesignerMain038331478410_cell_3" style="top:255px;">
      <div class="title">Title 3</div>
      <div class="description" >Description 3</div>
      <div class="background"></div>
      <div class="thumbnail" style = "background-image:url(http://thumb.mediasuite.multicastmedia.com/thumbs/tid/w100/h74/t1321304202/2764743.jpg)" ></ div >
    </ li >
    <li class="cell" id="KickListDesignerMain038331478410_cell_4" style="top:340px;">
      <div class="title">Title 4</div>
      <div class="description" >Description 4</div>
      <div...

CSS

body{
  font-family: verdana;
  font-size: 8.5pt;
}
ul, li{
  list-style: none;
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
}
body ul, body li, body div{
  position: absolute;
}
#listDesigner_wrapper{
  width: 400px;
  height: 335px;
  top: 35px;
  left: 0px;
  overflow: hidden;
}

li.cell{
  color: #fff;
  opacity: 1;
  height: 85px;
  right: 25px;
  left: 0;
z-index: 0; background-color: rgb(24, 32, 54); border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; overflow-x: hidden; overflow-y: hidden; 
}
div.background{
position: absolute; opacity: 1; height: 100%; left: 124px; right: 0px; top: 0px; z-index: -1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(rgb(51, 51, 51)), to(rgb(0, 0, 0))); border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
}
div.title{
  top: 5px;
  right: 25px;
  width: 215px;
}
div.description{
  top: 25px;
  right: 25px;
  width: 215px;
}
div.thumbnail{
  top: 0; left: 0; width: 120px; bottom: 0px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#listDesigner{
  position: absolute;
  width: 100%;
  background: #333;
  height: 935px;
  overflow: hidden;
}

JavaScript

var iScroller;

function createScroller(wrapper) {
    iScroller = new IScroll(wrapper, {
        "checkDOMChanges": false,
        "hScroll": false,
        "hScrollbar": false,
        "vScroll": true,
        "vScrollbar": true
    });
}

function getListItemByIndex(num) {
    return document.getElementById("KickListDesignerMain038331478410_cell_" + num);
}

function jumpToElement() {
    var index = $("#scrollTo").val(),
        element = getListItemByIndex(index);
    iScroller.scrollToElement(element, 400);
}

function jumpToPosition() {
    var pos = Number($("#scrollTo").val());
    iScroller.scrollTo(0, -pos, 400);
}

$(function() {
    createScroller(document.getElementById("listDesigner_wrapper"));
    $("#jumpEl").bind("click", function() {
        jumpToElement();
    });
    $("#jumpPos").bind("click", function() {
        jumpToPosition();
    });
});