Jquery 使用slideToggle()显示上一个div时,如何防止滚动?
我有一个带有一些隐藏div和链接的页脚,当单击它们时应该会显示div:Jquery 使用slideToggle()显示上一个div时,如何防止滚动?,jquery,slidetoggle,Jquery,Slidetoggle,我有一个带有一些隐藏div和链接的页脚,当单击它们时应该会显示div: <div class="rvc-footer"> <div id="block1" class="rvc-footer-block"> Block1 </div> <div id="block2" class="rvc-footer-block"> Block 2 </div> <div> <a cla
<div class="rvc-footer">
<div id="block1" class="rvc-footer-block">
Block1
</div>
<div id="block2" class="rvc-footer-block">
Block 2
</div>
<div>
<a class="footer-button" href="#block1">Block1</a>
<a class="footer-button" href="#block2">Block2</a>
</div>
</div>
要显示div,内容向下滚动,链接不再可见(当链接位于浏览器底部时)。是否有办法强制浏览器保持在链接位置
在
$(a)的动画之后
结束时,您可以将html的滚动顶部
的主体
设置为按钮div页脚按钮包装
的顶部偏移量
//获取所有链接。
var link=$(“a.footer-button”);
控制台日志(链接);
//点击链接,做些什么。
link.on('click',函数(e){
e、 预防默认值();
var a=$(this.attr(“href”);
控制台日志(a);
$(“.rvc页脚块”).not(a).slideUp();
//$(a).滑动切换(函数(){
//$(“html,body”).animate({scrollTop:$('.footer按钮包装器').offset().top},600);
//});
$(a).制作动画({
高度:“切换”
},
{
步骤:函数(){
$(“html,body”).animate({scrollTop:$('.footer按钮包装器').offset().top},0);
}
});
});代码>
.rvc页脚{
利润上限:1000px;
}
.页脚按钮包装{
边缘顶部:10px;
}
.rvc页脚块{
显示:无;
边框:1px实心;
}
.footer按钮包装器.footer按钮{
显示:内联块;
右边距:10px;
光标:指针;
}
区块1
Lorem ipsum dolor sit amet,是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。
区块2
Lorem ipsum dolor sit amet,是一位杰出的领导者。他是一位伟大的领袖,也是一位杰出的领袖。他是一位伟大的领袖,也是一位杰出的领袖。他是一位伟大的领袖,也是一位杰出的领袖。他是一位伟大的领袖,也是一位杰出的领袖。埃尼安·康莫多·利古拉·埃吉特·多洛。
区块3
Lorem ipsum dolor sit amet,是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。
像这样使用它:
// On clicking of the links do something.
link.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var a = $(this).attr("href");
$(a).slideToggle();
});
你的意思是动画完成后,body
需要向下滚动吗?@MoshFeu div在触发链接之前,我希望链接不要移动。因此,可能我必须同时向下滚动主体,为什么会出现div.我希望链接根本不移动
链接会移动,因为div
。如果您愿意,我可以演示动画结束后如何滚动到主体的底部。@MoshFeu谢谢,我想看看您的想法。谢谢。这将起作用()。如果页脚按钮在切换期间在浏览器中根本不移动,我更愿意。我的答案已更新。。请注意,此解决方案会使身体“抖动”。这是你能做的最好的了。如果要避免这种情况,必须将alldiv
s设置为相同的高度。可能会添加溢出:滚动到它。应该添加什么e.stopPropagation()代码>阻止?@Stéphane会杀死点击事件上的冒泡。但它不会阻止链接向下移动。
// On clicking of the links do something.
link.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var a = $(this).attr("href");
$(a).slideToggle();
});