微网站自动显示 返回顶部 按钮 的代码

摘要:
DOCTYPE html˃返回到微站点测试的顶部˂!
<!DOCTYPE html>
<html>
<head>
    <title>微网站返回顶部测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
    <div id="box" style="100%; height:2000px; border:1px solid #ccc;">
        <input type="button" id="test" value="测试" />
    </div>
    
    <!--返回顶部-->
    <div id="divTop" class="returntop" style="position:fixed; right:10px; bottom:90px; display:none;  40px; height: 40px; background-color:#ccc;"></div>
    
    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //返回顶部
            $("#divTop").click(function () {
                $("body, html").animate({ scrollTop: 0 }, 0);
                $(this).hide();
            });
            
            //页面滚动时,“返回顶部”按钮 是否显示
            $(window).scroll(function () {
                showBackToTop();
            });

            //页面resize时,“返回顶部”按钮 是否显示
            $(window).resize(function () {
                showBackToTop();
            });
            
            //测试按钮单击事件
            $("#test").click(function(){
                $("#box").height(5000);
            });
        });

        //返回顶部
        var globalScrollTop = $(document).height() - $(window).height();
        //alert($(document).height() + " - " + $(window).height());
        function showBackToTop() {
            if ($(window).scrollTop() > globalScrollTop) {
                $("#divTop").show();
            }
            else {
                $("#divTop").hide();
            }
        }
    </script>
</body>
</html>

免责声明:文章转载自《微网站自动显示 返回顶部 按钮 的代码》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android Runnable 运行在那个线程vim常用命令(二)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

beego

Charset=utf8“)56//参数4(可选)设置最大空闲连接7//参数5modelorm.RegisterModelRegisterModelWithPrefix。使用表名前缀orm.RegisterModelWithPrefixbeego自动创建表。1//参数1使用默认数据库ORM接口使用1//查询操作2funread(){3o:=ORM.NewOr...

zabbix监控华为交换机

xmlversion=“1.0”encoding=“UTF-8”?...

antd中,popover 不同情境下设置不同背景图,无法设置className的情况

于是就想通过设置不同的status值来添加不同的className,以设置.ant-popover-inner的样式来设置背景图,当然,这样做有一个不完美的就是不能一步到位的全部改变,需要手动更改.ant-popover-placement-bottom˃.ant-popover-content˃.ant-popover-arrow来替换那个角角的值。问题就...

Grafana 安装配置启动

多个数据源:Graphite、InfluxDB、OpenTSDB、Prometheus、Elasticsearch、CloudWatch、KairosDB、Zabbix等。通知和提醒,达到目标设置的阈值,并发出警报。grafana具有以下三个用户权限管理员:超级管理员,具有所有权限查看器:只能查看DashBoardEditer:无法创建用户,无法添加数据源,...

SkyWalking 服务端配置

在安装基于Docker的ElasticSearch时,在为什么需要链接跟踪一章中,我们介绍了几种SkyWalking存储解决方案。官方推荐的解决方案是ElasticSearch,因此我们需要首先安装Elastic搜索。...

「Docker」关于 Docker volume 挂载时文件或文件夹不存在的问题

背景:Dockervolume允许我们在启动Docker容器时动态装载一些文件以覆盖图像中的原始文件。然而,当我们将主机上不存在的文件夹或文件装载到容器时会发生什么?由于文件装载仅覆盖单个文件,而不会影响容器中同一文件夹中的其他文件,因此通常用于装载配置文件,以在运行时动态修改默认配置。如果您尝试提前在主机/文件夹路径/A中放置一些内容,您会发现在容器启动后...