基于Jquery的电梯导航

一般来说，一些大型的电商网站首页，页面内容很多，页面会很长，这时候大部分网站都选择使用电梯导航，使页面跳转到相应位置或者返回顶部。
下面使用jquery库来实现电梯导航

基本思路

电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果。

1. 页面滚动到相应的位置，实现电梯导航的显示与隐藏
2. 页面滚动到相应的位置，电梯导航的按钮添加或者移出相应的类
3. 点击电梯导航按钮，实现页面的滚动和为按钮添加或者移出相应的类
4. 点击顶部按钮，返回顶部

代码实现

html代码

    <div class="header">头部</div>
    <div class="banner">焦点图</div>
    <div class="content">
        <div class="qinzi w">亲子</div>
        <div class="liren w">丽人</div>
        <div class="xuexi w">学习</div>
        <div class="lvyou w">旅游</div>
        <div class="zhusu w">住宿</div>
        <div class="meishi w">美食&