jquery返回頁面頂部
阿新 • • 發佈:2017-06-08
網站 als png scrip width color style () code
1、此博文圖片樣式引用騰訊網站,效果如下:
2、樣式設置:
1 #toTop { 2 /*選中的背景圖片的大小*/ 3 width: 54px; 4 height: 54px; 5 display: none;/*剛開始不顯示*/ 6 position: fixed; 7 right: 25px;/*距離右邊大小值*/ 8 bottom: 45px;/*距離底部大小值*/ 9 /*選定圖片區域*/ 10 background-image: url(images/qqbg_1.5.5.png); 11 background-repeat: no-repeat;12 background-position: -700px -110px; 13 opacity: 0.3; /*透明度*/ 14 } 15 16 #toTop:hover { 17 opacity: 1;/*懸停時不透明*/ 18 filter: alpha(opacity = 100); 19 }
3、JS代碼:
1 <a href="#" target="_self" id="toTop" title="返回頂部" onclick="window.scrollTo(0,0);return false"></a> 2 <script type = "text/javascript"> 3 function toTopHide(){ 4 $(document).scrollTop()>400? 5 $("#toTop").show() 6 :$("#toTop").hide(); 7 } 8 $(window).scroll(function(){toTopHide()}); 9 </script>
jquery返回頁面頂部