不通过js实现电梯导航，a标签锚点

一般我们实现页面文章的一个大段的快速跳转是基本都是用的js实现，但通过a标签的锚点功能也是可以实现的。

这是HTML代码

a标签的锚点功能主要是通过a标签里面的href来绑定所要到达的位置，在div中声明一个id，通过a标签的href来绑定就实现了一个简单的电梯导航

<div class="nav">
    <a href="#前言">前言</a>
    <a href="#发展">发展</a>
    <a href="#结束">结束</a>
  </div>

  <div class="foreword" id="前言">
    <h2>前言模块</h2>
  </div>
  <div class="foreword" id="发展">
    <h2>发展模块</h2>
  </div>
  <div class="foreword" id="结束">
    <h2>结束模块</h2>
  </div>

这是css代码

 <style>
    .nav {
      position: fixed;
      left: 20px;
      top: 50px;
    }
    .foreword{
      text-align: center;
      width: 800px;
      height: 1000px;
    }
  </style>

实现效果

 这给实现的是没有动画效果的，如果需要动画效果可以加上js代码

JavaScript代码

$("a").click(function () {
 
 $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

 return false;

});

 注意：这个是要引入jQuery文件的不要忘记

加入动画效果