CSS: back-top效果

最新推荐文章于 2023-09-20 15:33:59 发布

离然

最新推荐文章于 2023-09-20 15:33:59 发布

阅读量335

点赞数

分类专栏： CSS魔法文章标签： html js css jquery

本文链接：https://blog.csdn.net/qq_34514388/article/details/117407712

版权

CSS魔法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用Bootstrap 4 和 jQuery 在网页中创建一个响应式的back-to-top按钮，当页面滚动超过一定高度时显示并允许用户快速返回顶部。通过简单的DOM操作和事件监听实现滚动检测及按钮行为。

摘要由CSDN通过智能技术生成

CSS: back-top效果

背景： bootstrap4 + jquery3.6
这里用了BS4的图标，借助jquery执行的dom操作，非必须。css不放了，就一个back-top按钮，比较简单，hover了一点效果。

html部分

<button onclick="topFunction()" id="movetop" title="Go to top">
    <i class="bi bi-arrow-90deg-up"></i>
</button>

js部分

```
<script>
    //滚动20px，出现back-top图标
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("movetop").style.display = "block";
        } else {
            document.getElementById("movetop").style.display = "none";
        }
    }
    //点击回滚到顶部
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
```