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-->
原文地址:https://www.cnblogs.com/OleRookie/p/5353834.html