使用href显示/隐藏div，并使用jquery滚动到显示的div

Question

我有一个jquery函数，它在单击href链接时显示/隐藏div。但每次加载div时，页面都会向上滚动到顶部，而不是目标div。这是div s的jquery代码和html布局。jquery用于从单击的链接中获取id并打开目标div。

我需要页面在点击后滚动到目标div。

所以如果我点击item1，那么页面滚动到div100，然后当我点击item1-desc1时，页面应该滚动到div1。

有没有一种方法可以编辑jquery来实现这一点。

我试着在点击功能中使用以下内容。但是页面没有滚动到目标分区。

  $('html, body').animate({
    scrollTop: $( $(this).attr('#') ).offset().top
    }, 500);
    return false;

$('a').click(function () {
var divname= this.name;
$("#"+divname).fadeIn("slow").siblings().fadeOut("fast");
});

<a href="#" name="div100" class="btn btn-primary btn-lg" ><font color = "white">item1</font></a>
<a href="#" name="div200" class="btn btn-primary btn-lg" ><font color = "white">item2</font></a>
<a href="#" name="div300" class="btn btn-primary btn-lg" ><font color = "white">item3</font></a>
<a href="#" name="div400" class="btn btn-primary btn-lg" ><font color = "white">item4</font></a>
<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >item1-desc1</a></li1>
<li1><a href="#" name="div2" >item1-desc2</a></li1>
<li1><a href="#" name="div3" >item1-desc3</a></li1>
  
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div4" > item2-desc1</a></li1>
<li1><a href="#" name="div5" >item2-desc2</a></li1>
<li1><a href="#" name="div6" >item2-desc3</a></li1>
    
<div id="div300" style="display:none" align="left">
<li1><a href="#" name="div7" > item3-desc1</a></li1>
<li1><a href="#" name="div8" >item3-desc2</a></li1>
<li1><a href="#" name="div9" >item3-desc3</a></li1>
      
<div id="div400" style="display:none" align="left">
<li1><a href="#" name="div10" > item4-desc1</a></li1>
<li1><a href="#" name="div11" >item4-desc2</a></li1>
<li1><a href="#" name="div12" >item4-desc3</a></li1>
  
<div id="div1" style="display:none" align="left">
  <!--div1 contents-->
<div id="div2" style="display:none" align="left">
  <!--div2 contents-->
<div id="div3" style="display:none" align="left">
  <!--div3 contents-->
<div id="div4" style="display:none" align="left">
  <!--div4 contents-->
  <!--- so on...->

Answer 1

你的尝试很好，你只是放错了属性：

$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
   }, 500);

你应该添加一个preventDefault:

$('a').on('click', function(e){
    e.preventDefault();
    var divname= this.name;
    $("#"+divname).fadeIn("slow").siblings().fadeOut("fast");
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
}

Answer 2

您可以更改a元素中的href属性以包括目标id:

<a href="#div100" name="div100" class="btn btn-primary btn-lg" ><font color = "white">item1</font></a>
<li1><a href="#div1" name="div1" >item1-desc1</a></li1>

这将为href中id为的元素添加一个锚点。因此，通过这种方式您可以删除：

$('html, body').animate({
    scrollTop: $( $(this).attr('#') ).offset().top
    }, 500);
return false;