通过jQuery实现页面内锚点平滑跳转的方法很多,可以通过插件实现,也可以简单的通过animate方法实现,下面介绍比较简单的方法。

代码只有一句话

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

animate()方法用来实现一组css的自定义动画,有两种调用方法

第一种形式接受4个参数,如下所示

.animate( properties [, duration] [, easing] [, complete] )

properties – 一个包含样式属性及值的映射
duration – 可选的速度参数,既可以是预置的字符串,也可以是一个毫秒数值
easing – 可选的缓动类型,jquery默认的只有两种:swing和linear,要使用其它效果需要安装缓动类的插件
complete – 可选的回调函数,在动画结束时被调用

第一种形式的示例如下

.animate({property1: 'value1', property2: 'value2'},

		speed, easing, function() {

			alert('The animation is finished.');

		});

本文实现锚点跳转的代码使用了第一种形式

$("html,body")代表对html或body元素进行动画,即要改变他们的css属性值
scrollTop是要改变的属性值,表示滚动条滑过的距离,在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度,它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。
1000是指动画时间为1秒

animate()方法还有第二种调用形式

.animate( properties, options )

一个是属性映射,一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中,同时又添加了两个选项。第二种形式的代码如下:

.animate({
	property1: 'value1',
	property2: 'value2'
}, {
	duration: 'value',
	easing: 'value',
	complete: function(){
		alert('The animation is finished.');
	},
	queue: boolen,
	step: callback
});

1条留言

评论功能已关闭