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

前端技术 2023/09/07 JavaScript

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的元素，回到底部；

本文地址：https://www.stayed.cn/item/17620

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案