jquery - 使用JQuery Slider滚动长页面

Question

我尝试使用 Jquery slider 来更轻松地滚动长页面。我的代码是

    $(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

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

我想要的是当我滚动页面时， slider 值跟随滚动位置。并且当 slider 值改变时，页面跟随 slider 值滚动。

我认为我使用的两个事件(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);
});

fiddle :http://jsfiddle.net/a4qt92qk/