网页中楼层跳转功能

sparrow_girl

于 2021-09-10 09:25:33 发布

阅读量364

点赞数

分类专栏： jQuery HTML+CSS 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_51053759/article/details/120214671

版权

本文介绍了如何利用HTML和jQuery实现网页楼层跳转功能。通过点击楼层导航li元素，获取其对应的楼层内容距离顶部的位置，并将滚动条调整至相应位置，实现平滑的楼层浏览体验。

摘要由CSDN通过智能技术生成

原理：

点击哪一个li，找到相应的楼层内容(为每个楼层内容设置一个.floor类)

把当前楼层对应到顶部的距离设置到滚动条上

步骤：

1、获取点击元素（li）的索引

2、获取当前楼层（.floor）距离顶部的距离

3、将获取到的距离设置到滚动条上

<div id="floorBox">
      <p>楼层导航</p>
      <ul>
        <li>
          <span>狗狗主粮</span>
        </li>
        <li>
          <span>狗狗零食</span>
        </li>
        <li>
          <span>狗狗保健</span>
        </li>
        <li>
          <span>狗狗日用</span>
        </li>
        <li>
          <span>狗狗玩具</span>
        </li>
      </ul>
      <div class="returnTop">
        <span class="iconfont icon-fanhuidingbu"></span><br>
        <span>返回顶部</span>
      </div>
    </div>

html结构效果&#