为什么我在通过href =＆＃34;元素＆＃34;？滚动时遇到困难？

Question

所以我有一个按钮，可以使用.hidden课程来切换要显示/隐藏的div到display:none和visibility:hidden。 但由于某种原因，当我锚定所述按钮时，它不会向下滚动到隐藏的类？在这种情况下，按钮根本不会锚定任何东西？

<a href="#anchor" class="btn" onclick="return false;">Button</a>

锚定到

<div id="anchor" class="hidden">Stuff</div>

和jQuery很简单：

$(".btn").click(function() {     
    $("#anchor").toggleClass("hidden");
});

有什么想法吗？

Answer 1

您需要从元素中删除onclick="return false;" - 这样可以防止默认行为

JSFiddle Link - 工作演示

或者 - 如果您需要防止默认行为，因为您的评论会发生一些奇怪的事情 - 您可以随时手动滚动到它。这是一个动画驱动的方法，可选择以毫秒为单位的时间来完成......

$('.btn').click(function(e) {  

    e.preventDefault();

    $('html, body').animate({
        scrollTop: $('#anchor').offset().top
    }, 200);
});

JSFiddle Link - 替代演示

最后 - 对于“没有多余装饰”的方法 - 以下内容就足够了（reference）......

$('#anchor').get(0).scrollIntoView();