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