使用JQuery滑块滚动长页面

我尝试使用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);
});

这里有完整的代码

问题是当页面滚动时，页面会直接向下移动，滑块值将为100

我想要的是当我滚动页面时，滑块值跟随滚动位置。当滑块值更改时，页面将按照滑块值滚动

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

---

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

我们需要做一些更正

HTML 您在输入中输入了

onchange=“scrollWin（）”

，但尚未创建此函数。这会产生一些错误。您不需要此函数，因为

$（'#slider mini'）。在（'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;

最终代码

用于（i=0；i

要获得正确的高度值，您需要计算
文档高度-窗口高度
：

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
上，也不容易让用户按预期的方式滚动页面？我的意思是我喜欢创新，但这些创新可以实现出色的用户体验。老实说，我没有发现水平处理程序是滚动页面的好方法。errm verticallyAwesome.+1谢谢你的精彩演示nswer。我花了很多时间在这段代码中。我不知道这是否与文档高度和窗口高度的差异有关。1000谢谢+1真棒。它很好。谢谢你的完整解释。在fiddle中，onchange=“scrollWin（）”不起作用，所以我用.on（'change'）替换了它，但我忘了删除它。不客气：）请标出问题的正确答案。
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);
});