jquery超出第一屏显示返回顶部

猿学

于 2022-12-21 17:07:26 发布

阅读量251

点赞数

分类专栏： JS HTML 文章标签： jquery javascript 前端

资料多来源于网络，如有侵权，请联系本人予以删除

本文链接：https://blog.csdn.net/weixin_38787928/article/details/128399411

版权

JS 同时被 2 个专栏收录

29 篇文章 1 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

HTML

8 篇文章 0 订阅

订阅专栏

本段代码用到了fontasome字体图标，需要引入样式

<link href="https://fontawesome.com.cn/wp-content/themes/deeptimes/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" >

jquery超出第一屏显示返回顶部html：

<div class="returnTop">
    <a href="javascript:window.scrollTo(0,0)">
        <i class="fa fa-angle-double-up"></i>
    </a>
</div>

css：

.returnTop{
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: 40px;
    width: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    display: block;
    background: #f8f8f8;
    border: 1px solid #f7f7f7;
}   
.returnTop a{
    color: rgb(235, 3, 3);
}

Jquery：

<script>
$(window).scroll(function(){
   if ($(window).scrollTop()>100){
      $(".returnTop").fadeIn(800);
    }else{
      $(".returnTop").fadeOut(800);
    }
});
</script>