zoukankan      html  css  js  c++  java
  • jQuery动画效果animate和scrollTop结合使用实例

    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

  • 相关阅读:
    Docker 学习4 Docker容器虚拟化网络概述
    Ceph 命令
    Day_09【常用API】扩展案例1_程序中使用一个长度为3的对象数组,存储用户的登录名和密码……
    Day_08【面向对象】扩展案例4_年龄为30岁的老王养了一只黑颜色的2岁的宠物……
    Day_08【面向对象】扩展案例3_使用多态的形式创建缉毒狗对象,调用缉毒方法和吼叫方法
    Day_08【面向对象】扩展案例2_测试旧手机新手机类,并给新手机实现玩游戏功能
    Day_08【面向对象】扩展案例1_测试项目经理类和程序员类
    用两个栈实现队列
    二叉树前序、中序、后序遍历相互求法
    洗牌
  • 原文地址:https://www.cnblogs.com/firstdream/p/7424002.html
Copyright © 2011-2022 走看看