使用 JavaScript 在 Bootstrap 模态上控制滚动
Control Scroll on Bootstrap Modal with JavaScript
我有一个带滚动条的 Bootstrap 模态，我希望每次用户单击模态主体中的按钮时，我都会执行一个转到向导下一步的函数在模态内。问题是，我希望每次单击按钮并转到下一步时，我希望模态的滚动条 return 到模态的顶部。
我知道您可以使用“window.scrollTo(0, 0)”在网页中轻松实现此目的，但我如何在 Bootstrap 模态中实现此目的。
谢谢
您可以使用 jQuery scrollTop function
$(document).ready(function() {
let $modal_body = $('.modal-body')
let $scroll_btn = $('.scroll-to-top')
$scroll_btn.click(function() {
$modal_body.scrollTop(0)
})
})
.modal-body {
max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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 overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada semper sem, at congue odio iaculis vitae. Morbi tempus ut quam at semper. Etiam ultrices nunc sed velit pellentesque, sit amet dignissim eros dapibus. Etiam laoreet eros eget
justo efficitur porttitor. Sed eget commodo eros. Nulla non eros ac nulla vestibulum placerat eu quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean tempor augue eget rhoncus luctus. Vestibulum metus quam, egestas
non justo ut, mattis pulvinar mauris. Donec eget nulla suscipit, lacinia libero in, rhoncus ex. Etiam consectetur tincidunt enim sed hendrerit. Suspendisse quis lobortis eros. Nulla sodales sagittis nisl, a malesuada nibh.
</p>
<p>
Ut dignissim metus vitae purus tempus, non suscipit dui dapibus. Nullam facilisis sapien sit amet nibh pulvinar gravida. Praesent quis mauris eu arcu aliquam rutrum. Nullam congue sodales nulla, in consectetur nibh. Donec feugiat, diam a congue dictum,
erat libero consectetur dui, ut iaculis nunc leo at metus. Aliquam pellentesque vehicula nisl et faucibus. Fusce vitae nulla vitae lectus consectetur semper eu vitae sapien. Morbi eu erat volutpat, tempus lorem non, rutrum mi. Duis tempus ipsum
vel placerat tincidunt. Quisque pellentesque suscipit nibh a congue. Sed malesuada, risus ac pellentesque viverra, odio eros ultricies elit, nec lobortis purus enim vitae ligula.
</p>
<p>
Sed ultricies, ante at commodo dignissim, nibh nunc pharetra augue, sit amet consequat ipsum nisl vitae urna. Etiam varius lacus sed ornare malesuada. Nullam pulvinar pharetra leo, at eleifend metus fringilla eu. Quisque eget fringilla turpis, malesuada
luctus turpis. Sed molestie laoreet porta. Mauris condimentum ut erat a tincidunt. Duis id vehicula ligula, ac congue neque. Mauris accumsan urna ac accumsan consectetur. Nunc sodales sem sed nulla imperdiet, in pharetra justo congue. Integer
ullamcorper sem quis quam mattis tristique. Nulla pretium congue dictum.
</p>
<p>
Nullam lectus massa, ornare vel dictum et, egestas in augue. Curabitur porttitor sem ex, et lacinia leo cursus quis. Morbi eu dapibus mauris. Fusce volutpat non ex eget lacinia. Vestibulum ex dui, sollicitudin a enim vel, volutpat varius turpis. Donec
volutpat, est non pharetra efficitur, purus neque consectetur tellus, vitae scelerisque quam felis eu quam. Fusce dictum ornare est, vitae facilisis metus fermentum et. Pellentesque porta purus nec tincidunt congue. Donec bibendum volutpat ligula
id ultricies. Vivamus non ante nec enim rutrum feugiat ut eget magna. Fusce justo quam, venenatis sed purus eget, ultrices consequat elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
Morbi pretium convallis eros non viverra. Integer lectus lectus, imperdiet eget erat in, lacinia pellentesque turpis.
</p>
<p>
Maecenas pulvinar justo at sodales fermentum. Pellentesque nec suscipit mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus arcu risus, consectetur vel pellentesque sed, accumsan in turpis. Nunc
quis enim aliquet, placerat ligula at, imperdiet mi. Morbi viverra pellentesque dolor, et fermentum metus vestibulum sit amet. Sed vel felis egestas, maximus libero id, tincidunt ante. Quisque sed risus quis magna auctor mattis. Etiam tempor
scelerisque augue non malesuada. Sed accumsan dui tellus. Mauris dignissim ante quis rhoncus lobortis. Mauris sollicitudin nunc nec mattis vehicula.
</p>
<p>
Proin non ex tellus. Etiam ornare neque sed nisi aliquet interdum. Nulla blandit tempor risus, at pharetra mi scelerisque eu. Suspendisse luctus sapien et tortor scelerisque facilisis. Nulla a augue pharetra, vehicula odio aliquam, venenatis ligula. Aenean
et odio odio. Morbi commodo viverra ipsum, consectetur aliquet dui dapibus vitae. Nunc egestas nec augue in mattis. Sed vehicula a tortor et blandit. Praesent augue ex, auctor vitae tincidunt vel, molestie dignissim lorem. Sed ligula urna, commodo
et finibus quis, laoreet vitae urna. Fusce feugiat nulla molestie, lobortis quam sit amet, vehicula mi. Aliquam eget tincidunt mi.
</p>
<p>
Proin dapibus consequat quam, sed tincidunt velit. Curabitur dolor tellus, gravida eu pretium ac, mattis eu turpis. Integer quis risus lobortis, consectetur magna in, rhoncus ipsum. Vestibulum ullamcorper lectus sed condimentum viverra. Nunc egestas lobortis
urna ut luctus. Integer nunc velit, mattis non sodales non, suscipit quis nibh. Integer vitae eros ligula. Integer gravida facilisis viverra. Maecenas interdum odio ut semper efficitur. In dapibus a lorem dapibus feugiat. Morbi non posuere lacus.
</p>
<p>
Maecenas facilisis luctus dapibus. Phasellus congue turpis magna, ut congue nisi fermentum sit amet. Fusce non risus ac metus posuere bibendum in sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec sed gravida ligula. Fusce rhoncus auctor dui, id mollis lectus porta eget. Donec ullamcorper non est et porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nam eu dolor in libero gravida commodo sit amet id nibh. Nam massa nisl, rhoncus eu tempus in, dignissim et turpis. Proin aliquam convallis accumsan. Maecenas in vehicula elit, a pellentesque mi. Maecenas feugiat purus nec euismod elementum. Nam vel purus
laoreet, facilisis tellus vel, vehicula odio. Pellentesque est elit, vulputate gravida felis vitae, consequat varius diam. Donec imperdiet aliquet lobortis. Donec nec dictum nisl. Pellentesque blandit ac est ut suscipit. Vivamus nec eros in
neque fringilla dictum eget non ligula. Pellentesque condimentum convallis dolor, non pharetra eros aliquet a. Donec nisl risus, pretium ut aliquam vitae, efficitur vel mauris. Praesent feugiat facilisis dolor, non aliquam lectus suscipit sed.
Aenean dictum nisi ut euismod lacinia. Quisque scelerisque ultricies viverra.
</p>
<p>
Aenean nibh ipsum, posuere sed aliquet ac, laoreet imperdiet lacus. Nunc tellus ex, cursus rutrum purus vitae, iaculis facilisis orci. Pellentesque vitae iaculis massa. Proin fringilla risus dui, ac pulvinar purus eleifend a. Duis at tellus non nulla
tempor vulputate. In dignissim, enim id bibendum condimentum, urna ante consequat odio, in varius augue massa eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor, nibh id hendrerit scelerisque, metus purus malesuada
nisl, quis bibendum mauris nibh at dui. Vestibulum viverra nulla faucibus, ornare felis a, rutrum nisl. Maecenas eu porttitor nulla. Nunc viverra urna eu ex rhoncus dapibus. Nulla non dignissim mi, nec facilisis ipsum. Integer vitae leo eget
velit consequat consequat nec sed dui. Pellentesque ipsum urna, egestas et ipsum eget, venenatis fringilla dui.
</p>
<p>
Nullam maximus risus ac sapien ullamcorper, ac euismod erat faucibus. Duis vel est quis leo malesuada porttitor. Nullam hendrerit sagittis commodo. Mauris finibus dictum orci, eget euismod nulla consequat eu. Integer ultricies nisl vel lorem pulvinar,
nec maximus massa efficitur. Donec venenatis dictum sem a elementum. Phasellus lectus augue, cursus at nulla in, scelerisque vulputate lorem. Pellentesque pellentesque laoreet lectus pulvinar ullamcorper. Phasellus faucibus risus ut augue rutrum,
et tempor urna dictum. Fusce id lacus urna. Etiam malesuada at ex a aliquet. Phasellus mollis mi non urna tristique, et vestibulum libero commodo. Phasellus tempor tellus at arcu tempor gravida.
</p>
<p>
Praesent laoreet tellus tempus orci sodales aliquet. Pellentesque aliquam faucibus quam, id aliquam velit condimentum vel. Etiam convallis leo at felis varius, vitae consectetur erat varius. Nullam ante nisl, sollicitudin non ornare sed, interdum ac nibh.
Curabitur sed vehicula dolor. Vivamus convallis arcu vel fermentum volutpat. Ut metus lacus, molestie sed condimentum ac, scelerisque vel neque. Pellentesque sed aliquam magna. Curabitur tempor ultrices magna eu ullamcorper. Vivamus ut nulla
in elit rhoncus finibus. Duis tristique tellus sit amet odio cursus, nec dignissim lacus euismod. Aliquam erat volutpat. Maecenas id mi imperdiet, maximus dolor in, feugiat metus. Donec mauris velit, euismod nec tellus sed, blandit facilisis
sem. Nulla facilisi.
</p>
<p>
Aenean augue felis, feugiat quis auctor ac, ultricies pellentesque justo. Proin ultricies id ante vitae porttitor. Proin porttitor lacinia erat. Donec eleifend condimentum justo, at tincidunt est. Quisque fringilla sollicitudin nisi, eget rhoncus sem
tincidunt in. Quisque faucibus placerat arcu et tempus. Duis sodales tincidunt lorem, at suscipit ex maximus ut. Donec efficitur diam et dui pharetra, quis condimentum ante iaculis.
</p>
<p>
Aliquam quis massa ex. Donec auctor dui quis est sodales fermentum. Aliquam nulla diam, venenatis maximus dui id, ultricies posuere risus. Nullam auctor rhoncus nibh at malesuada. Aenean at hendrerit orci, sed pellentesque metus. Maecenas porta ante sapien,
sit amet sollicitudin augue volutpat eu. In placerat ornare lorem, vel ullamcorper felis imperdiet sed. Ut pharetra luctus orci porttitor vestibulum. Morbi eu tortor at enim ornare rhoncus. Ut vitae enim posuere, tristique risus et, tempor orci.
Nam varius tellus eu magna scelerisque dignissim. Nunc auctor ligula in efficitur convallis. Nullam sed ligula enim. Nam ipsum ante, convallis vel malesuada at, congue ac tortor.
</p>
<p>
Vivamus gravida, magna eget lacinia consequat, quam libero feugiat quam, sit amet euismod lorem velit et nisi. Suspendisse ac pharetra dui. Nam venenatis viverra felis, id auctor nisl convallis id. Nunc dignissim rutrum nulla vel fermentum. Sed sagittis
gravida nibh ut facilisis. Curabitur quis faucibus arcu. Sed maximus tincidunt mattis. Suspendisse accumsan neque nec lorem consectetur fringilla. Nulla porta ante massa, quis sagittis sem mattis vel. Sed vitae nibh tincidunt, vehicula dolor
et, cursus sem.
</p>
<a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
我有一个带滚动条的 Bootstrap 模态，我希望每次用户单击模态主体中的按钮时，我都会执行一个转到向导下一步的函数在模态内。问题是，我希望每次单击按钮并转到下一步时，我希望模态的滚动条 return 到模态的顶部。
我知道您可以使用“window.scrollTo(0, 0)”在网页中轻松实现此目的，但我如何在 Bootstrap 模态中实现此目的。
谢谢
您可以使用 jQuery scrollTop function
$(document).ready(function() {
let $modal_body = $('.modal-body')
let $scroll_btn = $('.scroll-to-top')
$scroll_btn.click(function() {
$modal_body.scrollTop(0)
})
})
.modal-body {
max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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 overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada semper sem, at congue odio iaculis vitae. Morbi tempus ut quam at semper. Etiam ultrices nunc sed velit pellentesque, sit amet dignissim eros dapibus. Etiam laoreet eros eget
justo efficitur porttitor. Sed eget commodo eros. Nulla non eros ac nulla vestibulum placerat eu quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean tempor augue eget rhoncus luctus. Vestibulum metus quam, egestas
non justo ut, mattis pulvinar mauris. Donec eget nulla suscipit, lacinia libero in, rhoncus ex. Etiam consectetur tincidunt enim sed hendrerit. Suspendisse quis lobortis eros. Nulla sodales sagittis nisl, a malesuada nibh.
</p>
<p>
Ut dignissim metus vitae purus tempus, non suscipit dui dapibus. Nullam facilisis sapien sit amet nibh pulvinar gravida. Praesent quis mauris eu arcu aliquam rutrum. Nullam congue sodales nulla, in consectetur nibh. Donec feugiat, diam a congue dictum,
erat libero consectetur dui, ut iaculis nunc leo at metus. Aliquam pellentesque vehicula nisl et faucibus. Fusce vitae nulla vitae lectus consectetur semper eu vitae sapien. Morbi eu erat volutpat, tempus lorem non, rutrum mi. Duis tempus ipsum
vel placerat tincidunt. Quisque pellentesque suscipit nibh a congue. Sed malesuada, risus ac pellentesque viverra, odio eros ultricies elit, nec lobortis purus enim vitae ligula.
</p>
<p>
Sed ultricies, ante at commodo dignissim, nibh nunc pharetra augue, sit amet consequat ipsum nisl vitae urna. Etiam varius lacus sed ornare malesuada. Nullam pulvinar pharetra leo, at eleifend metus fringilla eu. Quisque eget fringilla turpis, malesuada
luctus turpis. Sed molestie laoreet porta. Mauris condimentum ut erat a tincidunt. Duis id vehicula ligula, ac congue neque. Mauris accumsan urna ac accumsan consectetur. Nunc sodales sem sed nulla imperdiet, in pharetra justo congue. Integer
ullamcorper sem quis quam mattis tristique. Nulla pretium congue dictum.
</p>
<p>
Nullam lectus massa, ornare vel dictum et, egestas in augue. Curabitur porttitor sem ex, et lacinia leo cursus quis. Morbi eu dapibus mauris. Fusce volutpat non ex eget lacinia. Vestibulum ex dui, sollicitudin a enim vel, volutpat varius turpis. Donec
volutpat, est non pharetra efficitur, purus neque consectetur tellus, vitae scelerisque quam felis eu quam. Fusce dictum ornare est, vitae facilisis metus fermentum et. Pellentesque porta purus nec tincidunt congue. Donec bibendum volutpat ligula
id ultricies. Vivamus non ante nec enim rutrum feugiat ut eget magna. Fusce justo quam, venenatis sed purus eget, ultrices consequat elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
Morbi pretium convallis eros non viverra. Integer lectus lectus, imperdiet eget erat in, lacinia pellentesque turpis.
</p>
<p>
Maecenas pulvinar justo at sodales fermentum. Pellentesque nec suscipit mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus arcu risus, consectetur vel pellentesque sed, accumsan in turpis. Nunc
quis enim aliquet, placerat ligula at, imperdiet mi. Morbi viverra pellentesque dolor, et fermentum metus vestibulum sit amet. Sed vel felis egestas, maximus libero id, tincidunt ante. Quisque sed risus quis magna auctor mattis. Etiam tempor
scelerisque augue non malesuada. Sed accumsan dui tellus. Mauris dignissim ante quis rhoncus lobortis. Mauris sollicitudin nunc nec mattis vehicula.
</p>
<p>
Proin non ex tellus. Etiam ornare neque sed nisi aliquet interdum. Nulla blandit tempor risus, at pharetra mi scelerisque eu. Suspendisse luctus sapien et tortor scelerisque facilisis. Nulla a augue pharetra, vehicula odio aliquam, venenatis ligula. Aenean
et odio odio. Morbi commodo viverra ipsum, consectetur aliquet dui dapibus vitae. Nunc egestas nec augue in mattis. Sed vehicula a tortor et blandit. Praesent augue ex, auctor vitae tincidunt vel, molestie dignissim lorem. Sed ligula urna, commodo
et finibus quis, laoreet vitae urna. Fusce feugiat nulla molestie, lobortis quam sit amet, vehicula mi. Aliquam eget tincidunt mi.
</p>
<p>
Proin dapibus consequat quam, sed tincidunt velit. Curabitur dolor tellus, gravida eu pretium ac, mattis eu turpis. Integer quis risus lobortis, consectetur magna in, rhoncus ipsum. Vestibulum ullamcorper lectus sed condimentum viverra. Nunc egestas lobortis
urna ut luctus. Integer nunc velit, mattis non sodales non, suscipit quis nibh. Integer vitae eros ligula. Integer gravida facilisis viverra. Maecenas interdum odio ut semper efficitur. In dapibus a lorem dapibus feugiat. Morbi non posuere lacus.
</p>
<p>
Maecenas facilisis luctus dapibus. Phasellus congue turpis magna, ut congue nisi fermentum sit amet. Fusce non risus ac metus posuere bibendum in sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec sed gravida ligula. Fusce rhoncus auctor dui, id mollis lectus porta eget. Donec ullamcorper non est et porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nam eu dolor in libero gravida commodo sit amet id nibh. Nam massa nisl, rhoncus eu tempus in, dignissim et turpis. Proin aliquam convallis accumsan. Maecenas in vehicula elit, a pellentesque mi. Maecenas feugiat purus nec euismod elementum. Nam vel purus
laoreet, facilisis tellus vel, vehicula odio. Pellentesque est elit, vulputate gravida felis vitae, consequat varius diam. Donec imperdiet aliquet lobortis. Donec nec dictum nisl. Pellentesque blandit ac est ut suscipit. Vivamus nec eros in
neque fringilla dictum eget non ligula. Pellentesque condimentum convallis dolor, non pharetra eros aliquet a. Donec nisl risus, pretium ut aliquam vitae, efficitur vel mauris. Praesent feugiat facilisis dolor, non aliquam lectus suscipit sed.
Aenean dictum nisi ut euismod lacinia. Quisque scelerisque ultricies viverra.
</p>
<p>
Aenean nibh ipsum, posuere sed aliquet ac, laoreet imperdiet lacus. Nunc tellus ex, cursus rutrum purus vitae, iaculis facilisis orci. Pellentesque vitae iaculis massa. Proin fringilla risus dui, ac pulvinar purus eleifend a. Duis at tellus non nulla
tempor vulputate. In dignissim, enim id bibendum condimentum, urna ante consequat odio, in varius augue massa eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor, nibh id hendrerit scelerisque, metus purus malesuada
nisl, quis bibendum mauris nibh at dui. Vestibulum viverra nulla faucibus, ornare felis a, rutrum nisl. Maecenas eu porttitor nulla. Nunc viverra urna eu ex rhoncus dapibus. Nulla non dignissim mi, nec facilisis ipsum. Integer vitae leo eget
velit consequat consequat nec sed dui. Pellentesque ipsum urna, egestas et ipsum eget, venenatis fringilla dui.
</p>
<p>
Nullam maximus risus ac sapien ullamcorper, ac euismod erat faucibus. Duis vel est quis leo malesuada porttitor. Nullam hendrerit sagittis commodo. Mauris finibus dictum orci, eget euismod nulla consequat eu. Integer ultricies nisl vel lorem pulvinar,
nec maximus massa efficitur. Donec venenatis dictum sem a elementum. Phasellus lectus augue, cursus at nulla in, scelerisque vulputate lorem. Pellentesque pellentesque laoreet lectus pulvinar ullamcorper. Phasellus faucibus risus ut augue rutrum,
et tempor urna dictum. Fusce id lacus urna. Etiam malesuada at ex a aliquet. Phasellus mollis mi non urna tristique, et vestibulum libero commodo. Phasellus tempor tellus at arcu tempor gravida.
</p>
<p>
Praesent laoreet tellus tempus orci sodales aliquet. Pellentesque aliquam faucibus quam, id aliquam velit condimentum vel. Etiam convallis leo at felis varius, vitae consectetur erat varius. Nullam ante nisl, sollicitudin non ornare sed, interdum ac nibh.
Curabitur sed vehicula dolor. Vivamus convallis arcu vel fermentum volutpat. Ut metus lacus, molestie sed condimentum ac, scelerisque vel neque. Pellentesque sed aliquam magna. Curabitur tempor ultrices magna eu ullamcorper. Vivamus ut nulla
in elit rhoncus finibus. Duis tristique tellus sit amet odio cursus, nec dignissim lacus euismod. Aliquam erat volutpat. Maecenas id mi imperdiet, maximus dolor in, feugiat metus. Donec mauris velit, euismod nec tellus sed, blandit facilisis
sem. Nulla facilisi.
</p>
<p>
Aenean augue felis, feugiat quis auctor ac, ultricies pellentesque justo. Proin ultricies id ante vitae porttitor. Proin porttitor lacinia erat. Donec eleifend condimentum justo, at tincidunt est. Quisque fringilla sollicitudin nisi, eget rhoncus sem
tincidunt in. Quisque faucibus placerat arcu et tempus. Duis sodales tincidunt lorem, at suscipit ex maximus ut. Donec efficitur diam et dui pharetra, quis condimentum ante iaculis.
</p>
<p>
Aliquam quis massa ex. Donec auctor dui quis est sodales fermentum. Aliquam nulla diam, venenatis maximus dui id, ultricies posuere risus. Nullam auctor rhoncus nibh at malesuada. Aenean at hendrerit orci, sed pellentesque metus. Maecenas porta ante sapien,
sit amet sollicitudin augue volutpat eu. In placerat ornare lorem, vel ullamcorper felis imperdiet sed. Ut pharetra luctus orci porttitor vestibulum. Morbi eu tortor at enim ornare rhoncus. Ut vitae enim posuere, tristique risus et, tempor orci.
Nam varius tellus eu magna scelerisque dignissim. Nunc auctor ligula in efficitur convallis. Nullam sed ligula enim. Nam ipsum ante, convallis vel malesuada at, congue ac tortor.
</p>
<p>
Vivamus gravida, magna eget lacinia consequat, quam libero feugiat quam, sit amet euismod lorem velit et nisi. Suspendisse ac pharetra dui. Nam venenatis viverra felis, id auctor nisl convallis id. Nunc dignissim rutrum nulla vel fermentum. Sed sagittis
gravida nibh ut facilisis. Curabitur quis faucibus arcu. Sed maximus tincidunt mattis. Suspendisse accumsan neque nec lorem consectetur fringilla. Nulla porta ante massa, quis sagittis sem mattis vel. Sed vitae nibh tincidunt, vehicula dolor
et, cursus sem.
</p>
<a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>