html锚点平滑跳转,jQuery下页面锚点的平滑跳转 - YangJunwei

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

关于锚点，看下面的两种锚点对：

超链接锚点：查看评论     

ID锚点：   查看评论     

评论列表

前者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秒)。

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

......

$(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;

});

});

......

......

点此平滑回到顶部

注意，JS代码要在页面加载时预读：

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

或

$(function(){ });