使用JQuery Slider滚动长页面

Question

我尝试使用Jquery滑块使滚动长页面更容易。我的代码是

    $(document).scroll(function () {
    var doc_top = $(window).scrollTop() ;
    var doc_height = $(window).height();
    $('#slider-mini').val(doc_top / doc_height * 100).slider('refresh');
    });

    $('#slider-mini').on('change',function(){
    var val_mini = document.getElementById("slider-mini").value;
    var doc_height = $(document).height();
    var pos_scroll = val_mini / 100 * doc_height;
    window.scrollTo(0, pos_scroll);
});

此处的完整代码JSFiddle

问题是页面滚动时，页面直接到底部，滑块值为100。

我想要的是当我滚动页面时，滑块值跟随滚动位置。当滑块值改变时，页面滚动符合滑块值。

我认为我使用的两个事件（onchange（）和document.scroll）相互影响。

我知道如何解决这个问题？

Answer 1

我们需要做一些修正。

HTML

您将onchange="scrollWin()"放入输入中，但尚未创建此功能。这会产生一些错误。您不需要此功能，因为$('#slider-mini').on('change'...为您执行此操作。

的JavaScript

首先，你写了这个：

var doc_top = $(window).scrollTop(); // It get the WINDOW offset

但我认为你想要这个：

var doc_height = $(document).height(); // It get the entire DOCUMENT height

然后，在滚动部分中，您忘记了括号，因此计算错误，滚动时您转到了错误的位置。看：

var pos_scroll = (val_mini / 100) * doc_height; // Correct calculation

另外，我注意到滚动永远不会得到100，因为函数数学也是错误的。我纠正了它：

$('#slider-mini').val((doc_top) / (doc_height - w_height) * 100).slider('refresh');

在滚动部分：

var pos_scroll = val_mini / 100 * doc_height;

最终代码

for (i = 0; i <= 30; i++) {
    $("#my-wrapper").append("<p> Paragraph " + i + "</p>");
}

$(document).scroll(function () {
    var doc_top = $(window).scrollTop() ;
    var doc_height = $(window).height();
    $('#slider-mini').val(doc_top / doc_height * 100).slider('refresh')

});

$('#slider-mini').on('change',function(){
   var val_mini = document.getElementById("slider-mini").value;
    var doc_height = $(document).height();
    var pos_scroll = val_mini / 100 * doc_height;
    window.scrollTo(0, pos_scroll);
});

小提琴：http://jsfiddle.net/a4qt92qk/

Answer 2

<强> jsFiddle demo

要获得正确的身高值，您需要计算document height - window height：

var $sli = $('#slider-mini'); // Chache your elements, specially the ones
var $doc = $(document);       // you plan to reuse inside a repetitive scroll
var $win = $(window);

$win.on("scroll resize", function () {
    var s = $(this).scrollTop();
    var h = $doc.height() - $(this).height();
    $sli.val(s / h * 100).slider("refresh");
});

$sli.on('change', function(){
    var h = $doc.height() - $win.height();
    window.scrollTo(0, this.value / 100 * h);
});

同样如上所述，请务必在resize

上获取/更新值