由 Bootstrap 切换触发的 Div 的平滑滚动到顶部

Question

我想使用平滑滚动为打开的 div 设置动画（我还希望它在单击时删除按钮）；但是，我不想为平滑滚动使用固定偏移量。

我试过：

    <script type="text/javascript">
$('#toggleContact').on('click', function(event) {
  event.preventDefault(); // To prevent following the link (optional)
 $(this).remove();
    $('html, body').animate({
        scrollTop: $('#DIV_ID').offset().top - 20
    }, 'slow');
});</script>

这是一个Fiddle：这是一个fiddle https://jsfiddle.net/s7sq58v2/

谢谢。

Answer 1

要隐藏按钮，您可以使用：

 $('.opencontact').hide();

您可能想为按钮分配一个 ID，这样其他类不受影响。

 <script type="text/javascript">
$('#toggleContact').on('click', function(event) {event.preventDefault();     // To prevent following the link (optional)
$(this).remove();
$('html, body').animate({
    scrollTop: $('#DIV_ID').offset().top - 20
}, 'slow');
$('.opencontact').hide();
});
</script>

您应该将 javascript 代码添加到您的 fiddle 中，以便于编辑和调试。

Answer 2

你可以这样做：

// To remove button, you can also use .hide() instead .remove()
$('.opencontact').on('click', function(event) {
    event.preventDefault(); // To prevent following the link (optional)
    $(this).remove();
});

// To scroll when collapse is completed
$('#toggleContact').on("shown.bs.collapse", function(){
    $('html, body').animate({
        scrollTop: $(this).offset().top - 20
    }, 'slow');
});

DEMO

由 Bootstrap 切换触发的 Div 的平滑滚动到顶部

Smooth Scroll to Top of Div triggered by Bootstrap Toggle

jquery

twitter-bootstrap

toggle

smooth-scrolling