foot.php文件的</body>上方添加下边的代码即可实现回到顶部,代码已经包含CSS和js

<!-- 回到顶部按钮 -->
<a href="#" id="back-to-top" title="回到顶部">🔝</a>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const backToTopButton = document.getElementById('back-to-top');

    window.addEventListener('scroll', function () {
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('show');
        } else {
            backToTopButton.classList.remove('show');
        }
    });

    backToTopButton.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});
</script>

<style>
#back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007acc;
    color: white;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 999;
}
#back-to-top:hover {
    background-color: #005a99;
    opacity: 1;
    transform: scale(1.1);
}
#back-to-top.show {
    display: block;
}
</style>

标签: Typecho

添加新评论

🔝