返回到顶部按钮

最新推荐文章于 2022-07-03 17:00:40 发布

chanzig

最新推荐文章于 2022-07-03 17:00:40 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：地址栏参数返回顶部

本文链接：https://blog.youkuaiyun.com/chanzig/article/details/46463451

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用HTML和JS实现页面滚动到顶部的功能，包括触发条件、样式设置和交互逻辑。

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

html代码：

<img src="img/air.png" class="airmain" alt="返回顶部"           
        style="width: 44px;
        height: 44px;
        bottom: 30%; 
        right: 1.2%;
        display: none;
        cursor: pointer"/>

js代码

$(function () {

    $(window).scroll(function() {
        if ($(window).scrollTop() > 350) {
            $("img.airmain").fadeIn(150);
        } else {
            $("img.airmain").fadeOut(150);
        }
    }); 


    $('img.airmain').click(function() {
        $("html,body").animate({ scrollTop: 0 }, 500);
    });


});