具有平滑显示/隐藏内容的交互式JS菜单，并使用jQuery滚动到顶部

Question

I am having troubles creating a completely smooth show/hide and scroll menu with jQuery
Is there any better solution than this?

SEE FULL DEMO ON JSFIDDLE

JS:

$(document).ready(function(){    

    $("#showIndex1").click(function(){
        $("#index1").show(1500);
        $("#index2").hide(1500)
    });
    $("#showIndex2").click(function(){
        $("#index2").show(1500);
        $("#index1").hide(1500)
    });

   $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop':  $target.offset().top - 20

    }, 1600, 'swing', function () {
        window.location.hash = target;
        });
});

});

HTML:

<div style="width: 100px">

<a href="#indexAchor1" id="showIndex1"><h2 id="indexAchor1">index1</h2></a>
<div id="index1" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<a href="#indexAchor2" id="showIndex2"><h2 id="indexAchor2">index2</h2></a>
<div id="index2" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

SEE FULL DEMO ON JSFIDDLE

Answer 1

Change your JS to this.

$(document).ready(function(){    
    $(".home").click(function(){
        $("#index1, #index2, #index3").hide();
    });
    $("#showIndex1").click(function(){
        $("#index1").show();
        $("#index2, #index3").hide()
    });
    $("#showIndex2").click(function(){
        $("#index2").show();
        $("#index1, #index3").hide()
    });
    $("#showIndex3").click(function(){
        $("#index3").show();
        $("#index1, #index2").hide()
    });
   $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop':  $target.offset().top

    }, 1600, function () {
        window.location.hash = target;
        });
});

});

Here is a fiddle

Update

fiddle