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

Answer 1

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

Answer 2

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/