Smooth Scroll to Top of Div, запускаемый Bootstrap Toggle

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: Вот скрипку 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(); 

Вы можете захотеть назначить идентификатор для кнопки, так что другие классы не затрагиваются.

<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 к своей скрипке, чтобы его можно было легко отредактировать и отладить.