楼层跳转的实现

必备知识：
 

windows 和document的区别：
Window -- 代表浏览器中一个打开的窗口：document 是其中的一个对象

document对象 -- 代表整个HTML 文档,可用来访问页面中的所有元素：
 

版权归作者所有，任何形式转载请联系作者。
作者：U_U（来自豆瓣）
来源：https://www.douban.com/note/244850140/

先看看jQuery offset()的文档说明:
> Get the current coordinates of the first element in the set of matched elements,
> relative to the document.

注意relative to the document, offset获得的位置是相对于document(整个文档)的, 因此这个位置是不是就不会变化了呢?

非也非也!
一个元素在静止状态下, offset值是恒定的, 因为他没有变化嘛, 在文档中的位置也就不会变了.
我们将一个html文档想象为一张白纸, 在纸上摆放一些元素, 那么当我们整体移动这张纸(window scroll)时, 在纸上的元素相对于纸张位置没有改变(怎么感觉是在说物理中的相对运动?).
但如果我们在纸(A)上再放另一张纸(B), 然后在B上放置元素, 这时候我们移动B纸(容器scroll), 那么B纸上元素的位置相对于纸A就发生了改变.


总结：jquery 的offset获得的位置是相对于document(整个文档)的，跟服元素是否有定位没关系，但是原生的是相对于有定位属性的父元素的位置，这是一个重要的区别。

所以不同情况的公式也不一样：

2张纸：jquery（比如ckf，记住相对于文档，并且offset是变化的）      点击后滚动条滚动的位置=之前滚动的距离+楼层的的offset  top
$('.car-brand').animate({scrollTop: $("li#" + initial).offset().top - $(".car-brand").offset().top + $(".car-brand").scrollTop()}, 500);

1张纸：原生js（比如之前写的楼层跳转，offset固定）      滚动条的距离=楼层的的offset  top



利用js

1. 基本概念
    offsetTop ：相对于有定位属性的父级元素的垂直距离。
    scrollTop：滚动条滚动的纵向距离。
    公式：楼层n.offsetTop=scrollTop+窗口的大小
               scrollTop=楼层n offsetTop-窗口的大小时
利用css  a 的锚链接
使用方法： 
1、使用<a>的name属性或者是id来设定一个錨的唯一标识 
2、在另一个<a>里通过“#+錨的标识”,来指向

一下是一张经典老图

该錨的链接