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

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

    animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。

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

  • 相关阅读:
    Linux-配置共享目录
    Linux-expect脚本-编写一个expect脚本
    MySQL-Linux下安装
    ETL-拉链算法-1
    ETL-拉链算法-带删除的拉链算法
    postgresql-基础-1
    Oracle-sql*plus
    【剑指offer11二进制中1的个数】
    【剑指offer10 矩形覆盖】
    【剑指offer080 09 跳台阶、变态跳台阶】
  • 原文地址:https://www.cnblogs.com/koleyang/p/4718365.html
Copyright © 2011-2022 走看看