html锚点 点击跳转到页面指定位置

本来是在看阮大神写的ajax教程，突然发现点击目录文字会跳转到相对应的文本内容，于是乎激发了我的兴趣。

这个究竟怎么做的，刚开始看的时候一知半解，找度娘就是：“点击跳转到页面指定位置”，找了下，原来专业术语叫：锚点。

度娘真是个博大精深的地方，有着多种的方法可以使用。

最简单的一种：

设置a标签的锚点就行啦，但是有个确定链接会更改，不利于刷新

<div class="skip" id="skip">
    <h2>目录</h2>
    <ul>
        <li>
            <a href="#toc0" class="aaa">点击文字跳转</a>
            <!--herf的值一定要带#号，并且要和相对应要跳转的值一致-->
        </li>
    </ul>
    <div class="chapter" style="margin-top: 850px;">
        <a name="toc0" class="aaa1">文字跳转到这里</a>
        <!--这里的a标签可以用name也可以用id-->
        <p>心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假
            心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假</p>
    </div>
</div>

第二种方法是根据animate的方法来移动

animate(params, [duration], [easing], [callback])

创建自定义动画，注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

例子：

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", //驼峰
    borderWidth: 10
  }, 1000 );
});

将上面的html中的a标签去掉#toc0

js代码

$(".aaa").click(function () {
    $('html,body').animate({
        scrollTop:$(".aaa1").offset().top},{duration:500,easing:'swing'});
    return false;
})

以上总结的两种是常用且兼容比较好的，较为简单的

也可参考复杂的案例

http://www.jb51.net/article/96574.htm

http://bbs.csdn.net/topics/390960199?page=1