zoukankan      html  css  js  c++  java
  • 返回顶部,js,css,页面离开顶部一定距离后出现返回顶部,点击后滚动回顶部,支持IE,FF,chrome ,safari,opera[摘自布布分享,tech.bubufx.com]

    支持所有浏览器,返回顶部代码,js实现,css辅助,页面离开顶部一定距离后出现返回顶部按钮或图片,点击返回顶部后滚动效果返回顶部。支持支持IE,FF,chrome ,safari,opera等浏览器。

    全部代码如下,将如下代码存为htm文件,运行看效果,同文件夹下放返回顶部图片“bubufx_top.jpg”

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>布布分享</title>
        <style type="text/css">
            #goTopImg
            {
                position: fixed;
                text-align: center;
                line-height: 30px;
                 30px;
                bottom: 60px;   /*离底部的距离*/
                height: 33px;
                font-size: 12px;
                cursor: pointer;
                right: 80px;   /*偏离右侧的距离*/
                _position: absolute;
                _right: auto;
            }
        </style>
        <script type="text/javascript">
    
            function goTopFun() {
                var bubufx_scrollheight = 600;     //页面离开顶部的距离,超过该距离才出现返回顶部图片
    
                var obj = document.getElementById("goTopImg");
                
                function getScrollTop() {
                    return document.documentElement.scrollTop + document.body.scrollTop;    //解决多浏览器支持,chrome等浏览器下document.documentElement.scrollTop的值是0
    
                }
                function setScrollTop(value) {
                    //解决多浏览器支持
                    if (document.documentElement.scrollTop == 0) {
                        document.body.scrollTop = value;
                    }
                    else {
                        document.documentElement.scrollTop = value;        
                    }
                }
                window.onscroll = function () { getScrollTop() > bubufx_scrollheight ? obj.style.display = "" : obj.style.display = "none"; }
                obj.onclick = function () {
                    var goTop = setInterval(scrollMove, 10);
                    function scrollMove() {
                        setScrollTop(getScrollTop() / 1.1);
                        if (getScrollTop() < 1) clearInterval(goTop);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div style="height: 6000px; text-align: center;">
            布布分享提示您,测试页面,让页面变的更高高
        </div>
        <script type="text/javascript">        
            var bubufx_goTopImg = "bubufx_top.jpg";
            document.write("<div style="display: none" id="goTopImg"><img border="0" src="" + bubufx_goTopImg + ""></div>");
            goTopFun();
        </script>
    </body>
    </html>
    

      原文地址:http://tech.bubufx.com/infodetail_22.html

  • 相关阅读:
    SD卡测试
    测试人员可能会遇到的问题
    HDU 1024 Max Sum Plus Plus
    HDU 1176 免费馅饼
    HDU 1257 最少拦截系统
    HDU 1087 Super Jumping! Jumping! Jumping!
    poj 1328 Radar Installation
    poj 1753 Flip Game
    HDU 1003 Max Sum
    HDU 5592 ZYB's Premutation(BestCoder Round #65 C)
  • 原文地址:https://www.cnblogs.com/weekzero/p/3039611.html
Copyright © 2011-2022 走看看