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; }) });
英文: JQuery – How to Animate Scrolling to the Top and Scrolling to a Div?
强烈推荐
- 英国代购-畅购英伦
- TopCashBack 返现 (英国购物必备, 积少成多, 我2年来一共得了3000多英镑)
- Quidco 返现 (也是很不错的英国返现网站, 返现率高)
- 注册就送10美元, 免费使用2个月的 DigitalOcean 云主机(性价比超高, 每月只需5美元)
- 注册就送10美元, 免费使用4个月的 Vultr 云主机(性价比超高, 每月只需2.5美元)
- 注册就送10美元, 免费使用2个月的 阿里 云主机(性价比超高, 每月只需4.5美元)
- 注册就送20美元, 免费使用4个月的 Linode 云主机(性价比超高, 每月只需5美元) (折扣码: PodCastInit2022)
- PlusNet 英国光纤(超快, 超划算! 用户名 doctorlai)
- 刷了美国运通信用卡一年得到的积分 换了 485英镑
- 注册就送50英镑 – 英国最便宜最划算的电气提供商
- 能把比特币莱特币变现的银行卡! 不需要手续费就可以把虚拟货币法币兑换
微信公众号: 小赖子的英国生活和资讯 JustYYUK