一起解决这些jQuery

我有两个脚本，分别工作得很好，但不能完全按照我想要的方式一起工作

我有4个按钮和4个目标div。第一个div最初显示，其他3个被隐藏。我要做的第一件事是单击4个按钮中的一个，它显示一个目标div，并使用以下脚本隐藏其他3个div：

// Toggle Divs
var currLayerId = "text0click";
function togLayer(id){
     if(currLayerId) setDisplay(currLayerId, "none");
     if(id)setDisplay(id, "block");
     currLayerId = id;
}

function setDisplay(id,value){
     var elm = document.getElementById(id);
     elm.style.display = value;
}

然后第二步是将屏幕向下滑动到刚才使用以下代码打开的目标div：

// Slide down function for four buttons
jQuery(document).ready(function(){
    var slidePosition = jQuery('#mens_section_link').offset().top;

    jQuery('#mens_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#womens_section_link').offset().top;

    jQuery('#womens_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#kids_section_link').offset().top;

    jQuery('#kids_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

jQuery(document).ready(function(){
    var slidePosition = jQuery('#equipment_section_link').offset().top;

    jQuery('#equipment_scroll').click(function(){
        jQuery('html, body').animate({scrollTop:slidePosition}, 'slow');
        return false;
    });
});

这两个脚本分别做了它们想要做的事情。然而，当我将它们组合在一起时，第一个脚本打开div的fine great并滚动到第一个div，这是因为div最初是显示的，但是所有其他最初设置为隐藏的div则相反，总是滚动到页面顶部

JSFiddle包含两个脚本的代码：

---

任何帮助都将不胜感激。

首先，不要将jQuery和纯javascript进行如此疯狂的混合，要么使用其中一种，要么 var elm=document.getElementById；或者var elm=$'elmId'，并且您已经以两种不同的方式将两个处理程序附加到同一事件，因此只适用于通过onclick attrubute附加的处理程序。您所需要的只是一个函数

$('.layer-toggle').on('click', function(e){
    e.preventDefault();
    var $that = $(this);

    $('html,body').animate({
       scrollTop: $that.offset().top
    }, 'slow')

    if ($('.togglable-div:visible').length){
       $('.togglable-div:visible').hide();
       $('#' + $that.attr('id') + '_div').show();
    }
});

然后从标记中删除onclick属性，并将id从text0click等更改为smth，更具意义，如btn id+div，以实现smth-like mens\u scroll\u div