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