html导航栏锚点链接跳转到float的div,实现点击导航栏切换不同的div

可以使用以下步骤实现：

1. 在导航栏中添加锚点链接，例如：

<ul>
  <li><a href="#div1">Div 1</a></li>
  <li><a href="#div2">Div 2</a></li>
  <li><a href="#div3">Div 3</a></li>
</ul>

2. 在页面中添加对应的 div 元素，并设置其样式为 float，例如：

<div id="div1" style="float:left; width:100%; height:500px;">Div 1</div>
<div id="div2" style="float:left; width:100%; height:500px;">Div 2</div>
<div id="div3" style="float:left; width:100%; height:500px;">Div 3</div>

3. 使用 CSS 样式将导航栏固定在页面顶部，例如：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

4. 使用 jQuery 监听导航栏链接的点击事件，并使用 animate 方法实现平滑滚动到对应的 div 元素，例如：

$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });
});

现在，当用户点击导航栏中的链接时，页面将平滑滚动到对应的 div 元素，从而实现切换不同的 div。