jQuery实现回到顶部效果

本文实例为大家分享了jQuery实现回到顶部效果的具体代码，供大家参考，具体内容如下

动画：通过点击侧栏导航，页面到达相应的位置

jQuery方法：show(), hide(), animate()

动画效果：

代码：

  
  
  
  
    body, div, ul, li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #container{
     margin: 10px;
   }
    #header{
     width: 100%;
     height:200px;
     border: 2px solid #000;
    }
    #contant ul li{
      width: 100%;
      height:600px;
      border: 2px solid #000;
    }
 
    #footer{
      width: 100%;
      height:200px;
      border: 2px solid #000;
    }
    #scroll{
      position: fixed;
      right: 50px;
      top: 300px;
      width: 80px;
      background: orange;
   opacity: 0.5
    }
    #scroll ul{
      list-style:none;
    }
    #scroll ul li{
      width: 100%;
      height: 45px;
      line-height:45px;
      text-align: center;
 
    }
  



头部

  

    
图书
    
服装
    
电子
    
宠物
  

底部

  

    
图书
    
服装
    
电子
    
宠物
    
回到顶部
  

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