zoukankan      html  css  js  c++  java
  • jq几句代码实现返回顶部效果

    网站上随处可见页面到底部会有一个返回顶部的图标,当然实现返回顶部效果,必然会用到scrollTop方法。scrollTop通俗意思就是被卷去的高度。

    下面就写一个最简单的返回顶部小例子,几句代码实现效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
                position:fixed;
                right:50px;
                bottom:50px;
            }
        </style>
    </head>
    <body style="height:1800px;">
        <a class="backTop" style="display:none;" href="javascript:void(0)">返回顶部</a>
    </body>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop()>=600){
                    $(".backTop").fadeIn();
                }else{
                    $(".backTop").fadeOut();
                }
            });
            $(".backTop").click(function(){
                $("html,body").animate({scrollTop:0},1000)
            })
    
        })
    </script>
    </html>

    这里需要注意的就是scrollTop方法有兼容性效果,针对ie低版本浏览器,要用html,而针对谷歌要用body,所以最后就可以直接两个都写。

    比较简单的例子,就是运用scrollTop方法。

  • 相关阅读:
    IOC和DI的区别
    hdu 1217(Floyed)
    hdu 2112(字典树+最短路)
    hdu 4081(次小生成树)
    hdu 1811(缩点+拓扑排序+并查集)
    poj 3026(BFS+最小生成树)
    hdu 3635(并查集)
    hdu 3047(扩展并查集)
    hdu 1116(并查集+欧拉路径)
    poj 1679(次小生成树)
  • 原文地址:https://www.cnblogs.com/web001/p/8423920.html
Copyright © 2011-2022 走看看