javascript - jQuery UI slider 不起作用(提供了 fiddle )

Question

我在我的网站中插入了一个 jQuery UI slider ，效果非常好。在这里您可以看到 slider :FIDDLE

当您单击“返回顶部”时，您会看到它只是滚动到顶部。但是当我使用 slider 转到 1918 年时，它就没有任何 slider 了。

有什么方法可以将此滚动 jquery 应用于 jQuery slider ，以便也可以像“返回顶部”按钮一样向下滚动页面。

提前致谢。

这是平滑滚动的代码:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();    
        var target = this.hash,
        $target = $(target);    
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Answer 1

使用与向上滚动相同的方法向下滚动。 slider 的更改功能应使用相同的动画方法。您还可以通过删除 if 语句并重用数组来获取 anchor 来简化函数:

change: function(event, ui) { 
    $('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
 });    

仅更改该功能将为您提供以下结果:

$(function() {
    var araObj = new Array( 1900, 1918, 1931, 1975, 1976, 1978, 2000, 2002, 2004, 2012, 2013 );

    $("#slider-range-max").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {

                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+0.97)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            },
            change: function(event, ui) { 
                  $('html, body').animate({ scrollTop: $('#'+araObj[ui.value-1]).offset().top }, 900); }
        });    
    });

// This is for the smooth scroll

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});