zoukankan      html  css  js  c++  java
  • JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

    首先给这些‘返回页首’的链接加上个Class:

    <a href="#" class="backtotop" target="_self">返回页首↑</a>
    
    <!--把所有返回页首的链接加上class,例如:backtotop-->

    然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置。当然你还要在<head>里包含jQuery库文件。(

     

     

    jQuery(document).ready(function() {
    

     

       jQuery('.backtotop').click(function(){
    

     

         jQuery('html').animate({scrollTop:0}, 'slow');

     

    }
    

    就这么简单?基本上是!但是使用jQuery('html')在Safari和Chrome(记得在什么地方看到过:chrome使用的是safari的核)下选择不到我们要的对象。好在在这两种浏览器下,我们可以使用jQuery('body')来替代。因此为了让代码的兼容性更强,我们可以加入对浏览器的判断,这里使用到jQuery提供jQuery.browser的方法。注意: 在jQuery1.3里,这种方法已经不建议使用。jQuery1.3新增jQuery.support的方法,用于展示不同浏览器各自特性和bug的属性集合,也就是说jQuery1.3不在建议对浏览器进行判断,而建议直接对某个特性进行判断。但是我不知道这个选择器的问题应该属于哪个特性,因此,我还是使用旧的方法。(jQuery.browser的方法在jQuery1.3里还是支持的)

     

    jQuery(document).ready(function() {
    
      jQuery('.backtotop').click(function(){
    
        if(jQuery.browser.safari) {//这里判断浏览器是否为safari
    
          jQuery('body').animate({scrollTop:0}, 'slow');
    
          return false;//返回false可以避免在原链接后加上#
    
        }
    
        else{
    
          jQuery('html').animate({scrollTop:0}, 1500);
    
          return false;
    
        }
    
      });
    
    });

    这上述代码里,我用到jQuery('body').animate({scrollTop:0}, 'slow'); 我们可以根据实际需要更改卷页的速度,你可以用'slow'、'fast'、或者用具体数字,例如1000(代表一秒,注意用具体数字时不用加单引号)。 另外,{scrollTop:0}表示返回页首,如果你只是想让页面卷到你要的特定位置,我们可以使用标签(ID)的方法,例如:要移到某个ID为'myID'的区域(<div id="myID">....</div>)顶部,我们可以使用类似的方法,但是要先计算这个区域距离页首的距离,代码如下:

     

    jQuery('body').animate({scrollTop:jQuery('#myID').offset().top}, 'slow');
    
    //jQuery('#myID').offset().top可以计算ID为myID的区域里页首的距离

     

  • 相关阅读:
    (二十五)Struts2 Tiles集成
    (二十四)Struts2 Spring集成
    etcd 和 redis的使用场景
    react v16.12 源码阅读环境搭建
    gmail邮箱怎么批量删除邮件
    动态创建的元素怎么做动画
    Window 添加定时任务
    commons-pool2-中的一些配置
    Activiti 5.18 流程Model 转成 流程BPMN文件
    Activiti 使用自己的身份认证服务
  • 原文地址:https://www.cnblogs.com/tweet/p/1667203.html
Copyright © 2011-2022 走看看