jquery楼层滚动重要知识总结（页面滚动距离获取）

浏览器页面的滚动事件

$(window).scroll(function() {
    // 当页面发生滚动时要做的事情
});

获取当前页面内容区域的高度

$(window).innerHeight()                  通常用  innerHeight()/2   内容区域一半的高度

获取 滚动条到页面顶部的垂直距离

$(document).scrollTop()  或    $(window).scrollTop()

 获取当前块元素距离页面顶部的距离

jQuery

$("#tabOne").offset().top;

Javascipt

document.getElementById("tabOne").offsetTop;

实现滚动效果

$("html,body").animate({ scrollTop: 300 }) 

 animate语法：     (selector).animate({styles},speed,easing,callback)

styles：必需。规定产生动画效果的一个或多个 CSS 属性/值。

speed：可选。规定动画的速度。 可能的值  1 毫秒    2 "slow"   3 "fast"。

easing：可选。规定在动画的不同点中元素的速度。可选 "swing"　"linear"。

                   "swing" - 在开头/结尾移动慢，在中间移动快。

                   "linear" - 匀速移动。

callback：可选。animate 函数执行完之后，要执行的函数。

js部分代码：

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$('html,body').scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();

 *****常见网页尺寸获取

1，获取屏幕的高度和宽度（屏幕分辨率）：

window.screen.height

window.screen.width，

2，获取屏幕工作区域的高度和宽度（去掉状态栏）：

window.screen.availHeight

window.screen.availWidth

3，网页全文的高度和宽度：

document.body.scrollHeight

document.body.scrollWidth

4，滚动条卷上去的高度和向右卷的宽度：

document.body.scrollTop

document.body.scrollLeft

5，网页可见区域的高度和宽度（不加边线）：

document.body.clientHeight

document.body.clientWidth

6，网页可见区域的高度和宽度（加边线）：

document.body.offsetHeight

document.body.offsetWidth