• Register

jQuery下页面锚点的平滑跳转

页面锚点的用途很多,常见于问答、百科类长页面!

关于锚点,看下面的两种锚点对:

超链接锚点:<a href="#comment">查看评论</a>      <a name="comment"></a>
ID锚点:   <a href="#comment">查看评论</a>      <h2 id="comment">评论列表</h2>

前者a-name形式较常用,但后者ID锚点更易用,且较前者节省了一段name代码,根据各自喜好吧!

在jQuery下实现锚点的平滑跳转关键在于下面这句代码:

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

注释一下,也方便日后查阅:

animate() 是jQuery自定义动画方法,W3School传送门

scrollTop() 返回或设置匹配元素的滚动条的垂直位置,W3School传送门

$("#comment").offset().top 表示id为comment的jQuery对象相对于页面顶部的偏移量;

1000表示平滑滚动动画执行速度为1000毫秒(1秒)。

给一段常见的返回页面顶部的代码示例:

<!DOCTYPE html>
<html>
<head>
......
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#foot a").click(function(){//可替换为:$(".yjw").click(function(){
        var href = $(this).attr("href");
        var pos = $(href).offset().top;
        $("html,body").animate({scrollTop: pos}, 1000);
        return false;
    });
});
</script>
</head>
<body>
<div id="top">
    ......
</div>

......

<div id="foot">
    <a href="#top" class="yjw">点此平滑回到顶部</a>
</div>

注意,JS代码要在页面加载时预读:

$(document).ready(function(){ });
或
$(function(){ });

扩展阅读:Google上的jQuery各版本引用地址集合

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/670.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 

4 条评论 »

  • 电光
    2015/01/15 at 10:11:54

    挺好的。谢谢啦

  • 橱柜设计
    2011/12/14 at 15:17:16

    分析的和不错啊! 谢谢分享!

  • 洗地机
    2011/12/13 at 19:47:35

    已经有些时间没来博主的博客,博主最近可好,我的网站www.nbyld.net 最近一直在做百度推广,一直没看到效果,不知道怎么办?

  • 加气混凝土设备
    2011/12/09 at 14:06:29

    谢谢分享 值得学习

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册