html+css+js编写的一个简约返回顶部按钮

作者:白马号时间：2024-10-14 15:18:29 阅读量：0

下面是一个简单的返回顶部按钮的HTML、CSS和JavaScript代码示例。这段代码将创建一个按钮，当用户滚动页面一定距离后，按钮会显示，用户点击按钮即可快速返回页面顶部。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<title>返回顶部按钮</title>
<style>
    /* 返回顶部按钮的样式 */
    #backToTop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        display: none; /* 默认隐藏 */
        cursor: pointer;
        padding: 10px 15px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    #backToTop:hover {
        background-color: #2980b9;
    }

    /* 图标样式 */
    #backToTop::before {
        content: "\f062"; /* font-awesome 向上的图标代码 */
        font-family: 'FontAwesome';
        font-size: 20px;
    }
</style>
</head>
<body>

<!-- 页面内容 -->
<div style="height: 2000px;">
    <p>这里是文章内容...</p>
</div>

<!-- 返回顶部按钮 -->
<button id="backToTop" title="返回顶部" onclick="scrollToTop()"></button>

<script>
    // 当用户滚动一定距离后显示返回顶部按钮
    window.onscroll = function() {
        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            document.getElementById("backToTop").style.display = "block";
        } else {
            document.getElementById("backToTop").style.display = "none";
        }
    };

    // 返回顶部函数
    function scrollToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
</script>

</body>
</html>

个人网站使用说明

1. 将 css 文件和图标fontawesome-webfont.woff2文件下载到本地，下载地址：


https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css

https://cdn.jsdelivr.net/npm/font-awesome/fonts/fontawesome-webfont.woff2

下载好后将引入模板中即可。

2. 将示例中的CSS复制到个人网站中的CSS文件上封装起来。


<style>
    /* 返回顶部按钮的样式 */
    #backToTop {
        position: fixed;
        bottom: 50%;
        right: 20px;
        z-index: 9999;
        display: none; /* 默认隐藏 */
        cursor: pointer;
        padding: 10px 15px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    #backToTop:hover {
        background-color: #2980b9;
    }

    /* 图标样式 */
    #backToTop::before {
        content: "\f062"; /* font-awesome 向上的图标代码 */
        font-family: 'FontAwesome';
        font-size: 20px;
    }
</style>

3. 将按钮 HTML和JS代码复制到 footer 通配引用。
如：


<!-- 返回顶部按钮 -->
<button id="backToTop" title="返回顶部" onclick="scrollToTop()"></button>

<script>
    // 当用户滚动一定距离后显示返回顶部按钮
    window.onscroll = function() {
        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            document.getElementById("backToTop").style.display = "block";
        } else {
            document.getElementById("backToTop").style.display = "none";
        }
    };

    // 返回顶部函数
    function scrollToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
</script>

将以上三步都设置好后就更新网站后台打开页面就显示正常了。

效果图：

html+css+js编写的一个简约返回顶部按钮

html+css+js编写的一个简约返回顶部按钮

个人网站使用说明

效果图：

相关文章