zoukankan      html  css  js  c++  java
  • Top 置顶小图标

    <!-- 拼命加载中... -->
    <div id="txt_loading">
    <label>{{txt_addload}}</label>
    </div>
    <!-- 拼命加载中... END-->


    <!--小小漂浮层--> <style type="text/css"> .topdiv { 60px; height: 60px; position: fixed; bottom: 50px; right: 50px; border-radius: 10px 10px 10px 10px; text-decoration: none; display: none; background-color: #999999; color: #FEFEFE; text-align: center; line-height: 60px; overflow: hidden; cursor: pointer; } </style> <div id="topdiv" class="topdiv"> Top </div> <script type="text/javascript"> //滚屏运行 $(function () { $(window).scroll(function () { //TOP顶部 //获取滚动后的高度 var scrollt = document.documentElement.scrollTop + document.body.scrollTop; var target = $('#topindex').offset().top; //目标高度 if (scrollt > target) { //判断滚动后高度超过xx就显示 $('#topdiv').fadeIn(50); //淡出 } else { $('#topdiv').stop().fadeOut(50); //如果返回或者超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动 } //可视高度 var h = document.documentElement.clientHeight; if (h + scrollt > $('#txt_loading').offset().top + $('#txt_loading').height()) { //延迟加载 $Common.Func.DelayedLoadingCallBack(function () { }); } }); $('#topdiv').click(function () {//当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部 var target = $('#topindex').offset().top; //目标高度 $("html,body").animate({ scrollTop: target }, 50); }); }); </script> <!-- 小小漂浮层 END-->
  • 相关阅读:
    今发现“最全前端资源汇集”,果断收藏
    js基础
    重排版与重绘
    小乌龟的配置
    考试网站
    苹果手机上时间的兼容
    自定义alert
    [概率dp] 流浪地球
    [权值线段树] 1163B2 Cat Party (Hard Edition)
    [单调栈]1156E Special Segments of Permutation
  • 原文地址:https://www.cnblogs.com/OleRookie/p/5353834.html
Copyright © 2011-2022 走看看