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

<!--小小漂浮層--> <style type="text/css">.topdiv {width: 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

總結

以上是生活随笔為你收集整理的Top 置顶小图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。