首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

停止在页脚上方始终滚动返回顶部按钮纯css和html

停止在页脚上方始终滚动返回顶部按钮纯CSS和HTML的实现方法如下:

HTML部分:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
    </div>
    
    <a href="#" class="back-to-top">返回顶部</a>
    
    <script src="script.js"></script>
</body>
</html>

CSS部分(style.css):

代码语言:txt
复制
.back-to-top {
    display: none; /* 初始状态隐藏按钮 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
}

.back-to-top.show {
    display: block; /* 滚动时显示按钮 */
}

JavaScript部分(script.js):

代码语言:txt
复制
window.addEventListener('scroll', function() {
    var backToTopButton = document.querySelector('.back-to-top');
    if (window.pageYOffset > 200) {
        backToTopButton.classList.add('show');
    } else {
        backToTopButton.classList.remove('show');
    }
});

上述代码实现了一个返回顶部按钮,当页面滚动超过200像素时,按钮会显示出来,点击按钮可以平滑地返回页面顶部。

该实现方法使用了纯CSS和HTML,没有涉及到任何云计算相关的内容。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的结果

领券