我有一个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...->
使用'event.preventDefault()'停止默认链接操作。 –
这不会做任何事情。当我使用上面的行时,链接不工作。 –