效果
前端
<div>
<!-- 其他内容在前 -->
<button class="btn btn-secondary back-to-top" id="rTop" onclick="toTop()">返回顶部</button>
</div>
<style>
/* 自定义返回顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>
<script>
// 返回顶端的按钮
window.onscroll = function () {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.getElementById('rTop').style.display = "block"
} else {
button1style = document.getElementById('rTop').style
button1style.display = "none"
button1style.cursor = "hand"
}
}
function toTop() {
window.scrollTo('0', '0');
button1style = document.getElementById('rTop').style;
button1style.display = "none"
//button1style.cursor="hand"
//document.getElementById('rTop').style.display="none"
}
</script>
如果是超长的模态框,则放在模态框的modal-body里:
<div class="modal fade" id="xxx" tabindex="-1" aria-labelledby="xxxLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header"></div>
<!-- 模态框内容 -->
<div class="modal-body" style="height: 800px; overflow-y: auto; ">
<!-- 其他内容在前 -->
<button class="btn btn-secondary back-to-top">返回顶部</button>
</div>
<!-- 模态框底部 -->
<div class="modal-footer"></div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取模态框中的内容和返回顶部按钮
const modalBody = document.querySelector('.modal-body');
const backToTopBtn = document.querySelector('.back-to-top');
// 检测滚动事件
modalBody.addEventListener('scroll', function () {
if (modalBody.scrollTop > 100) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
});
// 返回顶部按钮点击事件
backToTopBtn.addEventListener('click', function () {
modalBody.scrollTo({ top: 0, behavior: 'smooth' });
});
});
</script>
也可以用svg绘制按钮的外观:(随便画的)
<div class="rTop" id="rTop" onClick="toTop()">
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24" fill="red" stroke="red"/>
<path fill="#fff" stroke="#fff" stroke-width="1" d="M 30 17 L 18 17 L 18 15 L 30 15 L 18 30 L 29 30 L 29 42 L 31 42 L 31 30 L 42 30 L 30 15 L 42 15 L 42 17 Z"/>
</svg>
</div>