javascript-自动出现和消失的“返回顶部”按钮-实现

效果
在这里插入图片描述

前端

<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>
上一篇:架构师备考-非关系型数据库


下一篇:014:数据恢复软件iCare Data Recovery安装教程-一、软件介绍