JQuery 中提供了一个很方便的 animate 方法, 用来做一些简单的动画效果. 该方法需要三个参数 其中第一个是目标状态, 第二个是动画速度(“fast”, “slow”, 或者是自定义的时间毫秒), 第三个是可选的函数回调 用于指定当动画完成.
1 2 | var properties = { color: red; }; $('div').animate(properties, "fast", function() {}); |
var properties = { color: red; };
$('div').animate(properties, "fast", function() {});我最近重新设计了一下 我的个人主页 主要是为了让页面全部的手机友好. 你也许会注意到左上角和右下角分别有一个菜单 和 TOP的图标 分别用于跳转页面的菜单和顶部. 不是直接立刻的跳 而是有一个缓慢的滚动过程.
跳转到指定的DIV(或者其它)元素
页面的导航菜单显示在每个页面的主要内容之后 所以定义了一个 div#ID 为 navigate. 然后加入以下 JQuery 脚本:
1 2 3 4 5 6 | $("a[href='#navigate']").click(function(){ $("html, body").stop().animate( {scrollTop:$("div#navigate").offset().top}, "slow"); return false; }) }); |
$("a[href='#navigate']").click(function(){
$("html, body").stop().animate(
{scrollTop:$("div#navigate").offset().top}, "slow");
return false;
})
});滚动到顶部
在页面的首部定义一个标记 anchor
<a name='top'></a>
一般是放在HTML <body> 之后 然后加入以下 JQuery 代码:
1 2 3 4 5 6 | $("a[href='#top']").click(function(){ $("html, body").stop().animate( {scrollTop:0}, "slow"); return false; }) }); |
$("a[href='#top']").click(function(){
$("html, body").stop().animate(
{scrollTop:0}, "slow");
return false;
})
});
scroll
英文: JQuery – How to Animate Scrolling to the Top and Scrolling to a Div?
GD Star Rating
loading...
本文一共 265 个汉字, 你数一下对不对.loading...
上一篇: 英国潮湿需要用除湿机
下一篇: 一张图告诉你北京的雾霾有多严重
扫描二维码，分享本文到微信朋友圈
