反滚动两个div

我试图反向滚动两个选择控件.当我向下滚动第一个选择时,另一个应该向上滚动.这就是我目前正在做的事情

//scroll first list if second list is scrolled
$("#secondList").on("scroll", function(){    
    //alert("focused");
    $("#firstList").scrollTop($(this).scrollTop());
});

//scroll second list if first list is scrolled
$("#firstList").on("scroll", function(){
    $("#secondList").scrollTop($(this).scrollTop());
});

从底部开始第二个选择框我正在这样做

$("div #secondList").animate({ scrollTop: $("#2").height() }, "slow");

但它开始从底部选择.我的HTML是

注意 我正在动态添加选项

$.getJSON("ColorNameMap.json", function(data){
    for (var i = 0, len = data.length; i < len; i++) {
        var color = data[i].color;
        var value = data[i].value;

        $("#firstList").append(''+color+'');
        $("#secondList").append(''+value+'');
    }
});

我可以在这里看到答案,但我想要反向滚动.请帮我继续正确的方向.