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>

这是一个小提琴：这是一个小提琴https://jsfiddle.net/s7sq58v2/

谢谢。

Answer 1

你可以这样做：

// 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

Answer 2

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

 $('.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代码添加到您的小提琴中，以便轻松编辑和调试。

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

2 个答案: