js实现带有动画的返回顶部

本文实例为大家分享了js实现带有动画返回顶部的具体代码，供大家参考，具体内容如下

1、滑动鼠标往下滑动，侧边栏跟着往上移动，当到达某一个位置的时候，侧边栏停止移动；鼠标往上，则侧边栏往下-停止

2、当鼠标继续下滑到某一个位置，“返回顶部”几个字会弹出此处如果点击“返回顶部”，则立刻到了顶部

3、到达顶部位置效果

4、源代码

  
  
  
  
    * {
      margin: 0;
      padding: 0;
    }

    
    .w {
      width: 980px;
      margin: 0 auto;
    }

    
    .head {
      height: 200px;
      background-color: teal;
    }

    
    .banner {
      height: 450px;
      background-color: red
    }

    
    .sidebar {
      position: absolute;
      top: 300px;
      right: 250px;
      display: inline-block;
      width: 40px;
      height: 80px;
      background-color: cyan;
      text-align: center;
    }

    
    .sidebar span {
      display: none;
      font-size: 14px;
      cursor: pointer;
    }

    
    .zhuti {
      height: 300px;
      background-color: violet;
    }

    
    .footer {
      height: 700px;
      background-color: yellow;
    }
  



  广告


    返回顶部
  
  头部区域
  banner区域
  主体区域
  尾部区域

  

5、喜欢记得点击，关注，收藏噢，不喜勿喷~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。