使用 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 上也能获取/更新值