jQuery UI Slider doesn't work (fiddle is provided)

Question

I've inserted a jQuery UI slider in my website, which works pretty good. Here you can see the slider: FIDDLE

When you click on 'back to the top' you see it just scrolls to the top. But when I go with the slider to for example 1918, it just goes without any slide.

Is there any way to apply this scroll jquery to the jQuery slider, so that also scrolls down the page just like the button 'back to the top'.

Thanks in advance.

Here's the code 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;
        });
    });
});

score 2 · Accepted Answer · answered Dec 26 '13 at 16:51

Use the same approach for scrolling down that you are using for scrolling up. The change function for your slider should use the same animate method. You can also simplify your function by removing the if statement and reusing the array for obtaining the anchor:

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

Changing just that function would give you this:

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

Trevor · Answer 2 · 2013-12-26T18:58:41.573

One major problem is that you are initializing $(function() { and $(document).ready(function(){ all the code can and should be written in one initialization function that runs when the document is ready.

The way you have it setup currently is causing some issues with the document and sometimes your elements are not being found by Id because of this.

I would consolidate your code into one ready function:

Something like this would work:

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

        });        
    });

});

Example:

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

The code you sent worked very well with Google Chrome, but when I open my site on Internet Explorer or Firefox it doesn't work. Is there a solution for this? — user3024879, Dec 26 '13 at 18:37
@user3024879 in my example I used `$('body').stop().animate` instead of `$('html, body').stop().animate`. It looks like `Firefox` needs the `html` in there to work. — Trevor, Dec 26 '13 at 18:53
Yes I added html in there but it still doesn't work in IE. However, thanks for your help — user3024879, Dec 26 '13 at 20:46
@user3024879 just curious what version of IE are you using? It works for me in IE 10. — Trevor, Dec 26 '13 at 20:51
I'm using IE 9, but it's better if it also works on older versions of IE, so all the visitors can see it. But I found a solution for it. Thanks for your help! — user3024879, Dec 26 '13 at 22:11

jQuery UI Slider doesn't work (fiddle is provided)

2 Answers2