显示/隐藏div的jquery切换…如何防止页面跳转到顶部？

我有以下jquery脚本，当有人单击链接时显示/隐藏一个div。问题是当有人点击页面中间的链接时，div确实显示和隐藏，这也使得整个页面跳到了顶部。我如何防止这种情况

<a href="#" class="toggle-div">Show Div</a>

<script type='text/javascript'>
  $(".toggle").click(function(){
  $(".toggle-div").slideToggle("fast");
    $(this).html(function(i,html) {
        if (html.indexOf('Show') != -1 ){
           html = html.replace('Show','Hide');
        } else {
           html = html.replace('Hide','Show');
        }
        return html;
    });
});
</script>

$（“.toggle”）。单击（函数（）{
$（“.toggle div”）.slideToggle（“fast”）；
$（this）.html（函数（i，html）{
如果（html.indexOf（'Show'）！=-1）{
html=html.replace（'Show'，'Hide'）；
}否则{
html=html.replace（'Hide'，'Show'）；
}
返回html；
});
});

$（“.toggle”）。打开（'click'，函数（事件）{
event.preventDefault（）；
$（“.toggle div”）.slideToggle（“fast”）；
$（this）.html（函数（i，html）{
如果（html.indexOf（'Show'）！=-1）{
html=html.replace（'Show'，'Hide'）；
}否则{
html=html.replace（'Hide'，'Show'）；
}
返回html；
});
});

<script type='text/javascript'>
  $(".toggle").on('click', function (event){
  event.preventDefault();
  $(".toggle-div").slideToggle("fast");
    $(this).html(function(i,html) {
        if (html.indexOf('Show') != -1 ){
           html = html.replace('Show','Hide');
        } else {
           html = html.replace('Hide','Show');
        }
        return html;
    });
});
</script>