利用滚动条触发一建返回顶部按钮功能

前言：我视代码如初恋，bug浮现又浮现

很多网站都会有那么一个返回顶部按钮，它并不是一开始就出现的，而是滑动一段距离才出现，话不多说，开始掉头发......

---

先看初始化效果图

这是页面初始化的时候，右下角并没有出现返回顶部按钮（注意右侧滚动条处）

激活后效果图

这是页面向下滑动400px后出现的效果图，距离自己调（滚动条滚动条滚动条）

代码如下

html代码：

//先找一个长图做背景
//或者新建一个div直接给高度足够撑开页面
//或者技术高超有其他方法也行

<div class="pic"><img src="./固定定位长图背景.jpg" alt=""></div>
<a href="" class="top">top</a> 

css代码：

  //初始化，懂得都懂，不懂得我也不会解释
     *{
          margin:0;
          padding:0;
      }
      .pic{
          width:100%;

      }
      .pic img{
          display:block;
          width:100%;
      }
      //以上代码除了div高度有无都可，这不是写页面
      //(这里没有div高度，因为我引用的图片高度足够)

      //这是按钮样式
      .top {
          width:80px;
          height:80px;
          background-color:red;
          color:#fff;
          position:fixed;
          bottom:20px;
          right:20px;
          //关键代码，页面初始是不显示的
          display:none;

js代码：

//创建页面滚动函数
//这也是我发现一个bug的起点
$(window).scroll(function(){
//此处定义如果页面向下滑动400px    top出现
//否则 display：none
     if($(window).scrollTop() > 400){
            $(".top").css("display", "block"); 
        }else{
            $(".top").css("display", "none");
        }
    })
    //切记不要忘记引用js文件，不然不管用
    //这个组件似乎也适用于导航栏下滑时固定在屏幕上方
    //有兴趣的评论区一决高下

我怀疑有bug但我没有证据，是的，这段代码正常运行，但是问题就是太顺了，总觉得哪里不对，求大佬指点

---

总结

以上就是今天分享的小功能，功能不大但很有用，我会继续分享实用小功能，预知后事如何，且带我拯救m78星云回来继续