锚点，是网页中超链接的一种，简单来说就是一种页面内定位器，点击锚点，可以让页面快速定位到某个点。其在高度较高的网页中比较常见，例如百度百科的页面。

据我所知，锚点有两种实现方法。一种是a标点+name属性，使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。另一种是a标签+id属性，使用id属性对所有标签都有效。

第一种，a标签+name属性

<a href='#test'>点击跳转</a>
<a name='test'></a>

第二种，a标签+id属性

<a href='#test'>点击跳转</a>
<h3 id='test'>测试标题</h3>

而原生的跳转十分僵硬，页面会直接定为到要跳转的点，一瞬间跳转过去，看着很生硬。为了让跳转过程更舒服，我们可以使用JQuery来给跳转添加滑动效果，在页面引入JQuery的js文件后，在自己的js文件中写入下面的代码并引入页面中即可实现。

$("a").click(function () {

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

    return false;//不要这句会有点卡顿

});

其中offset() 方法返回或设置匹配元素的left或者top的页面偏移量（getBoundingClientRect()放回当前窗口的偏移量），具体用法可以到W3School或菜鸟教程看看;

$(this).attr(“href”)是获取你所点击的a标签里面的href属性值。

$($(this).attr(“href”)).offset().top 是获取id等于$(this).attr(“href”)块所在的位置，比如点击<a href="test">时，就会获取到id=’test’的块的位置，这里的-20只是让滑动到的块下移20px，使其更加靠近屏幕中间，让a标签跟加好用。

scrollTop是滑动动作，比如scrollTop: 50px 就是滑动到html距离顶部的50px高处。

animate是动作函数，提供scrollTop等动作，500则是指animate所提供的动作在500毫秒内完成，这里就是指滑动0.5秒。

$(“a”).click(function (){ }）指a标签被点击是触发{ } 内的事件，所以也可以把a标签改成自定义标签，然后就可以实现一个页面既有普通a标签，也有可以滑动的标签。