实现一个js楼层导航点击跳转到对应的楼层

好的，我可以给你一些思路。

首先，你需要获取到每个楼层的相对位置（offsetTop）。可以使用JavaScript的offsetTop属性来获取每个楼层元素距离文档顶部的位置。

接下来，你可以创建一个楼层导航条，用于点击跳转到对应的楼层。可以使用HTML和CSS创建一个fixed定位的导航条，并使用JavaScript编写代码来为导航条中的每个链接添加点击事件。

在每个链接的点击事件中，你需要获取目标楼层元素的offsetTop值，并使用JavaScript的scrollTop属性将页面滚动到该位置。

下面是一个简单的示例代码：

HTML代码：

<!-- 楼层导航条 -->
<div class="floor-nav">
  <ul>
    <li><a href="#f1">1楼</a></li>
    <li><a href="#f2">2楼</a></li>
    <li><a href="#f3">3楼</a></li>
  </ul>
</div>

<!-- 楼层内容 -->
<div id="f1" class="floor">1楼</div>
<div id="f2" class="floor">2楼</div>
<div id="f3" class="floor">3楼</div>

CSS代码：

/* 楼层导航条样式 */
.floor-nav {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.floor-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floor-nav li {
  margin-bottom: 10px;
}

.floor-nav a {
  color: #333;
  text-decoration: none;
}

JavaScript代码：

// 获取所有楼层元素
var floors = document.querySelectorAll('.floor');

// 获取楼层导航条
var nav = document.querySelector('.floor-nav');

// 为每个链接添加点击事件
nav.addEventListener('click', function(e) {
  e.preventDefault();
  if (e.target.tagName === 'A') {
    // 获取目标楼层元素的offsetTop值
    var floorId = e.target.getAttribute('href');
    var targetFloor = document.querySelector(floorId);
    var offsetTop = targetFloor.offsetTop;

    // 滚动到目标位置
    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    });
  }
});

这段代码会为楼层导航条中的每个链接添加点击事件，当点击链接时，会获取对应楼层元素的offsetTop值，并使用平滑滚动将页面滚动到该位置。