javascript - 如何从模式提交按钮滚动到元素?
问题描述
我希望我的模态提交按钮将我的用户带到我在模态之外的联系表单,并在此过程中关闭模态。我已经尝试了几个想法,但到目前为止,我正在滚动到想要的元素,但是当模态关闭时,它会滚动回我的模态最初所在的元素。
模态:
<div class="modal fade" id="Modal-<?= $formation['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<?= $formation['descriptionLongue'] ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary devis">Demander un devis</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- FORMATION -->
联系表
<div class="container col-4" id="contact">
<!-- form contact -->
<form class="text-center border border-light p-5" action="<?=buildUrl('/contact');?>" method="POST">
etc...
Java脚本
const target = document.getElementById('contact'),
buttons = document.querySelectorAll('.devis');
for (const button of buttons) {
button.addEventListener('click', function(){
$(this).parents('.modal').modal('hide');
target.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'nearest'
});
});
}