本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣。
这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:“点击跳转到页面指定位置”,找了下,原来专业术语叫:锚点。
度娘真是个博大精深的地方,有着多种的方法可以使用。
最简单的一种:
设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新
第二种方法是根据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