返回底部按钮代码参考

返回底部按钮代码
 

要创建一个返回到页面底部的按钮,您可以使用HTML和JavaScript。下面是一个简单的示例:

HTML结构

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回底部按钮示例</title>
<style>
/* 返回底部按钮样式 */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 50px; /* 使文字垂直居中 */
    font-size: 20px;
    display: none; /* 默认隐藏 */
}

/* 当页面滚动超过一定距离时显示返回底部按钮 */
body.scrolled #backToTop {
    display: block;
}
</style>
</head>
<body>

<!-- 长页面内容 -->
<p>这里是页面的内容,可以继续添加更多的内容...</p>

<!-- 返回底部按钮 -->
<button id="backToTop"></button>

<script>
// 当页面滚动时执行函数
window.onscroll = function() {
    scrollFunction();
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        // 如果页面滚动超过20px,则添加scrolled类到<body>标签
        document.body.classList.add('scrolled');
    } else {
        // 否则移除scrolled类
        document.body.classList.remove('scrolled');
    }
}
</script>

</body>
</html>

在这个示例中,我们创建了一个返回底部的按钮,并通过CSS将隐藏其默认。当用户升级滚动页面超过20像素时,JavaScript函数scrollFunction会被触发,给<body>标签添加scrolled类。由于我们在CSS中设置了.scrolled #backToTopdisplay属性为block,因此当<body>标签拥有scrolled类别时,返回底部按钮会显示出来。

点击按钮修改时,页面会自动滚动到底部。如果您想要页面平滑滚动到底部,可以JavaScript代码如下:

// 当用户点击返回底部按钮时执行函数
document.getElementById('backToTop').onclick = function() {
    window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth'
    });
};

这样,当用户点击按钮时,页面会平滑地滚动到底部。

温馨提示:本文最后更新于2024-05-12 22:14:18,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容