jquery实现回到顶部效果

朱雀 2022-09-14 09:09 198阅读 0赞

**css:**

**html:**

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/
    <script src="./js/jquery.js"></script>
        <script>
            //   当页面滚动距离 >= 500 显示
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 500){
                    $('button').show();
                }else{
                    $('button').hide();
                }
            });
            // 点击按钮 回到页面顶部
            $('button').click(function () {  
                $('html,body').animate({'scrollTop':0})
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/56bbd829b0e245feb703f723e758ec53.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/3e2ad73797b44456a1f85f271eaa1894.png