2016-08-03 161 views
0

我有一个jquery函数,显示/隐藏div点击href链接点击。但是每次加载div时,页面将滚动到顶部而不是目标div。这里是jQuery代码和div s的html布局。 jquery用于从点击链接获取id并打开目标div。使用href显示/隐藏div并使用jquery滚动到显示的div

我需要页面滚动到单击目标div。

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

有没有办法编辑jquery来实现这一点。

我已经尝试在click函数中使用下面的内容。但该页面不滚动到目标div。

$('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...->

+1

使用'event.preventDefault()'停止默认链接操作。 –

+0

这不会做任何事情。当我使用上面的行时,链接不工作。 –

回答

1

你的尝试是好的,你只是把错误的ATTR:

$('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); 
} 
+0

我之前也试过上面的代码。它不会做任何事情。页面上的链接不会提出任何问题。 @shwarp –

+0

噢,对不起,我没有仔细观察你的html:你需要在你想要去的div的id中加入href,比如'',但是如果你不想这么做,那么你可以用'$(“#”+ divname)' – shwarp

+0

替换'$(this).attr('href')'它实际上起作用。非常感谢。我正在尝试各种插件,这是一个简单的修复。 –

0

呦u能在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;