js 一键置顶

最新推荐文章于 2023-02-24 14:18:32 发布

菜鸟小宅

最新推荐文章于 2023-02-24 14:18:32 发布

阅读量422

点赞数

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/qq_38670891/article/details/120657546

版权

本文介绍了如何使用JavaScript、HTML和CSS实现页面元素的一键置顶功能。通过CSS设置样式，JavaScript处理交互逻辑，可以轻松实现网页元素的置顶效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一键置顶

css代码:

* {
margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.content {
    overflow: scroll;
    border: 1px solid red;
}

#box {
    height: 6000px;
}

#btn {
    width: 50px;
    height: 50px;
    color: white;
    background: orange;
    border: 1px solid red;
    text-align: center;
    font-size: 18px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    letter-spacing: 3px;
    display: none;
    /* 冰凉小手 */
    cursor: pointer;
}

html代码:

<div class="content">
    <div id="box">

    </div>
    <div id="btn">
        回到顶部
    </div>
</div>

js代码:

$(window).scroll(function () {
 // 获取滚动的距离
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log('scrollTop:', scrollTop);
    // 让按钮隐藏 到达一定距离后显示
    if (scrollTop > 5000) {
        $('#btn').show();
    } else {
        $('#btn').hide();
    }
});

// 点击按钮 回到顶部
$('#btn').click(function () {
    console.log('===', $('html').scrollTop());
    $('html').animate({
        scrollTop: 0,
    }, 2000, function () {
        $('#btn').hide();
    })
})