jQuery动画效果animate和scrollTop结合使用实例

2014-04-02 12

CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。
字符串值无法创建动画(比如 "background-color:red")。

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

上面的代码表示滚动条跳到0的位置,页面移动速度是800。
结合scrollTop实用示例:
jQuery(document).ready(function($){
 $('#shang').click(function(){
  $('html,body').animate({scrollTop: '0px'}, 800);
 });
 $('#comt').click(function(){
  $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
 });
 $('#xia').click(function(){
  $('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
 });
});

表示点击相关ID移动到指定位置:
点击ID为shang的元素,回到顶部;
点击ID为comt的元素,回到ID为comments的位置;
点击ID为xia的元素,回到底部;
展开阅读全文

更多Javascript文章

分享15个大家都熟知的jquery小技巧
Dec 02 20
jQuery实现字体颜色渐变效果的方法
Mar 29 26
浅谈Vuex的状态管理(全家桶)
Nov 04 27
解决iview打包时UglifyJs报错的问题
Mar 07 19
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 22
sharp.js安装过程中遇到的问题总结
Apr 02 19
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 22
手机访问当前页面