jquery实现楼层滚动效果

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下

html:

 
 
 
   
   
   
   
    #header,#f1,#f2,#f3{ 
      width: 80%; 
      height: 500px; 
      background: yellow; 
      margin-left: 10%; 
      margin-top: 50px; 
    } 
    #f1{ 
      background: green; 
    } 
    #f2{ 
      background: red; 
    } 
    #f3{ 
      background: blue; 
    } 
    #lift{ 
      position: fixed; 
      top: 280px; 
      display: none; 
    } 
    .lift_btn{ 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      border: 1px solid #000; 
    } 
    .hover{ 
      background: red; 
    } 
   
 
 
   
   
    
第一层
 
   
   
    
第二层
 
   
   
    
第三层
 
   
   
    
 
      
 
  
   1 
  
      
 
      
 
  
   2 
  
      
 
      
 
  
   3 
  
      
 
    
 
   
 
   
   
 
 

js:

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$('html,body').scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop{ 
      var $f=$(elem); 
      if($f.offset().top

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