关于页面锚点跳转以及万能锚点跳转插件

一、锚点定义

   锚点嘛，业余点的解释就是可以让页面定位到某个位置的点。点击其中一个链接，就会跳转到页面的相应位置。这就是锚点的作用之一。锚点还可以用在跳转到其他页面的相应位置，起关键作用的就是链接地址后面跟着的“#”后字符串。

二、锚点方式

1、一种是a标签+name属性。

<a href="#1">作者介绍></a>            <a name="1"></a>

2、还有一种就是使用标签的id属性。

<a href="#1">作者介绍></a>            <h2 id="1">作者介绍</h2>

三、含锚点跳转的URL地址

1. 关于”#”

在页面制作中，”#”这个符号相当常见，且具有一定的通用性。基本上，其表示的含义是id选择符。例如在CSS中#box{}就表示id为box标签的样式如何如何；在jQuery中，$(“#box”)表示选择id为box的标签为jQuery对象；同样的，在页面的URL中，”#”也可以理解为id选择符之意，也就是页面跳转到含URL指向的id的标签处。

例如，我们在浏览器地址栏中输入或是复制如下URL：http://www.candyDchen.com/demo.html#0
由于URL地址末尾带有”#”标识符，这就相当于告诉浏览器：“哥，小妹要跳了，你要接好我哦！”。由于”#”后面跟着的是0，所以呢，浏览器就会在地址为http://www.candyDchen.com/demo.html#0的页面上寻找符合”#0″特点的标签，并执行跳转。

四、jQuery下锚点的平滑跳转

对于锚点的平滑跳转，我觉得要谨慎使用，在个人站点或是这个效果含有功能提示可以用一用，在一般的商业性质的网站上，权衡来讲，不用更好，当然，这只是我的个人意见。jQuery库已经为我们做了很多的工作了，所以，在jQuery下实现锚点的平滑跳转是简单轻松的。例如，我们要让页面平滑滚动到一个id为box的元素处，则jQuery代码只要一句话，如下：

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

其中animate为jQuery自定义动画方法，$(“#box”).offset().top表示id为box的jQuery对象距离页面顶部的偏移值，1000表示平滑动画执行的时间为1000毫秒，也就是1秒。

相应HTML部分代码如下：

<div id="top" class="append_box mb20">
    平滑跳转到底部：<a href="#bottom" class="smooth">滑到底部</a>
</div>
<div id="bottom" class="append_box mb20">
    平滑回到顶部：<a href="#top" class="smooth">回到顶部链接</a>
</div>

JS部分代码：

$(".smooth").click(function(){
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);    
    return false;
});