zoukankan      html  css  js  c++  java
  • jquery返回顶部特效

    <style>
        p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; }
        p#back-to-top a{ text-align:center;  text-decoration:none;  color:#d1d1d1;  display:block;  width:30px;
            /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
            transition:color 1s; -moz-transition:color 1s;
            -webkit-transition:color 1s;
            -o-transition:color 1s;}
        p#back-to-top a span{
            background:url(images/ico.jpg) no-repeat; display:block;height:30px;  width:30px;margin-bottom:5px;
            /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
            transition:background 1s;  -moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
    </style>
     1 <div style=" 100%; height: 3000px;"></div>
     2 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
     3 
     4 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
     5 <script>
     6     $(function(){
     7         $(window).scroll(function(){
     8             if($(window).scrollTop()>=100){
     9                 $("#back-to-top").fadeIn(1500); //缓慢的将段落淡入
    10             }
    11             else{
    12                 $("#back-to-top").fadeOut(1500); //缓慢的将段落淡出
    13             }
    14         })
    15         $("#back-to-top").click(function(){
    16            $('body.html').animate({scrollTop},1000);
    17            return false;
    18        })
    19     })
    20 </script>
  • 相关阅读:
    JavaScript事件阶段
    JavaScript阻止事件冒泡
    JavaScript事件冒泡
    JavaScript简单的随机点名系统
    理解Android线程创建流程
    SurfaceFlinger启动篇
    Android系统启动-zygote篇
    Android系统启动-Init篇
    Android系统启动-SystemServer下篇
    Android系统启动-SystemServer上篇
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5841255.html
Copyright © 2011-2022 走看看