码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-24 18:02:48      阅读:606      评论:0      收藏:0      [点我收藏+]

标签:check   http   stress   inter   lin   play   jquery   tip   on()   

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的元素,回到底部;

 

原生js如何实现jQuery.animate中的scrollTop方法

  • jquery
  •                                                                     
  • javascript
  •                                                             

                            

radical                                2016年12月02日提问

                        

    

                                                         0                                                     
                    

网上找不到一个好的介绍来实现,

$(‘html, body‘).animate({
  scrollTop: 800
}, 1000)

怎么控制这个scrollTop的 时间呢?

                    
                
 

查看全部 3 个回答        

                                 0                             

你要做的不是控制时间,而是控制步长,比如800px,800ms,就是800ms内移动800px,如果是1600px,那就800ms内移动1600px

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

标签:check   http   stress   inter   lin   play   jquery   tip   on()   

原文地址:http://www.cnblogs.com/firstdream/p/7424002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!