使用jquery ui slider（）函数进行页面滚动

Question

我正在尝试使用jquery / javascript创建一个可垂直滚动的滑块。花了最后两天尝试不同的选项，但似乎没有任何东西可以用于我的布局。

$(".timeLiner .timeLinerBar").slider({
  orientation: "vertical",
  min: 0,
  max: 100,
  value: 2,
  slide: function(event, ui) {
    $("span#amount").text(ui.value);
  }
});

$(document).scroll(function() {
  var doc_top = $(window).scrollTop();
  var doc_height = $(document).height();
  var w_height = $(window).height();
  $('.timeLinerBar').innerHTML = (doc_top) / (doc_height - w_height) * 100;
});

$('.timeLinerBar').on('change', function() {
  var val_mini = document.getElementById("amount").innerHTML;
  var doc_height = $(document).height();
  var w_height = $(window).height();
  var pos_scroll = (doc_height - w_height) / 100 * val_mini;
  window.scrollTo(0, pos_scroll);
});

.timeLinerBar {
  float: right;
  width: 5px;
  height: 100%;
  position: absolute;
  background: darkred;
  top: 0;
  bottom: 0px;
  margin: 0 auto;
  z-index: 999 !important;
  left: 50%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeLinerBar" id="slider-mini"><span id="amount"></span></div>

我希望能够使用具有jquery-ui .slider（）函数的.timeLinerBar类滚动页面 - 我想垂直滚动页面。