Question

我在我的网站上插入了一个jQuery UI滑块，效果非常好。您可以在此处看到滑块：FIDDLE

当您点击“返回顶部”时，您会看到它只是滚动到顶部。但是当我使用滑块时，例如1918年，它就没有任何滑动。

有没有办法将此滚动jquery应用于jQuery滑块，这样也可以向下滚动页面，就像按钮'回到顶部'一样。

提前致谢。

以下是平滑滚动的代码：

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

使用相同的方法向下滚动您用于向上滚动的方法。滑块的更改功能应使用相同的animate方法。您还可以通过删除if语句并重用数组来获取锚点来简化您的功能：

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;
        });
    });
});

Answer 2

一个主要问题是您正在初始化$(function() {和$(document).ready(function(){所有代码都可以并且应该在文档准备就绪时运行的一个初始化函数中编写。

您目前设置它的方式是导致文档出现问题，有时因为ID而无法找到您的元素。

我会将您的代码合并到one就绪函数中：

这样的事情会起作用：

$(document).ready(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) { 
             var year = '';
             var val=ui.value;
             if(val == 1)
             {
                 year = '1900';    //same tab
             }
             else if(val == 2)
             {
                 year = '1918';
             }
             else if(val == 3)
             {
                 year = '1931';
             }
             else if(val == 4)
             {
             window.location.href='http://www.google.com';
             }
             else if(val == 5)
             {
             window.location.href='http://www.google.com';
             }
            if(year != ''){
                $('html, body').stop().animate({
                    'scrollTop': $('#'+year).offset().top
                }, 900, 'swing', function () {
                });     
            }
          } 
        });
    console.log(araObj);

    $('.link').click(function(e){
        e.preventDefault();
        $('html, body').stop().animate({
            'scrollTop': 0
        }, 900, 'swing', function () {

        });        
    });

});

示例：

http://jsfiddle.net/trevordowdle/wqB5q/9/

jQuery UI Slider不起作用（提供小提琴）

2 个答案: