代码改变世界
[登录 · 注册]
  • jquery实现返回基部案例效果
  • <!doctype html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>webrx-title</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
    /*returnTop*/  
    p#back-to-top{  
        position:fixed;  
        display:none;  
        bottom:100px;  
        right:80px;  
    }  
    p#back-to-top a{  
        text-align:center;  
        text-decoration:none;  
        color:#d1d1d1;  
        display:block;  
        width:64px;  
        /*使用CSS3中的transition属性给跳转链接中的文字加入渐变效果*/  
        -moz-transition:color 1s;  
        -webkit-transition:color 1s;  
        -o-transition:color 1s;  
    }  
    p#back-to-top a:hover{  
        color:#979797;  
    }  
    p#back-to-top a span{  
        background-image:url(top1.png);  
        border-radius:6px;  
        display:block;  
        height:64px;  
        width:56px;  
        margin-bottom:5px;  
        /*使用CSS3中的transition属性给<span>标签背景颜色加入渐变效果*/  
        -moz-transition:background 1s;  
        -webkit-transition:background 1s;  
        -o-transition:background 1s;  
    }  
    #back-to-top a:hover span{  
        background-image:url(top1.png);  
    } 
    </style>
    <script>
    $(document).ready(function(e) {
    //当滚动栏的位置处于距顶部100像素下面时。跳转链接出现,否则消失  
            $(function () {  
                $(window).scroll(function(){  
                    if ($(window).scrollTop()>100){  
                        $("#back-to-top").fadeIn(1500);  
                    }  
                    else  
                    {  
                        $("#back-to-top").fadeOut(1500);  
                    }  
                });  
      
                //当点击跳转链接后。回到页面顶部位置  
      
                $("#back-to-top").click(function(){  
                    $('body,html').animate({scrollTop:0},1000);  
                    return false;  
                });  
            });  
       
    });
    </script>
    </head>
    
    <body>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>
    <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>  
    </body>
    </html>
    

  • 上一篇:机房收费系统——项目开发计划书
    下一篇:【LeetCode】Power of Two
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/mengfanrong/p/5425310.html
走看看 - 开发者的网上家园