这个插件功能在于当网页内容高度很高时,方便用户快速回到顶部。核心在于对屏幕高度的获取,定时器的使用,在引用代码后,只使用$.nhsd.returnTop();即可实现效果
效果图:
代码:
1 ; 2 function nhsdpageScroll() { 3 var timeInterval; 4 if ((document.documentElement.scrollTop + document.body.scrollTop) == 0) { 5 clearTimeout(timeInterval); 6 } 7 else { 8 window.scrollBy(0, -1000); 9 timeInterval = setTimeout("nhsdpageScroll();", 100); 10 } 11 } 12 jQuery.nhsd = { 13 returnTop: function () { 14 $opts = { 15 backgroundImage: '/Images/Extend/top1.png' 16 }; 17 viewHeight = window.screen.availHeight;//屏幕可用工作区高度 18 $returnTopDiv = $('<div></div>').appendTo($('body')); 19 $returnTopDiv.attr('style', 'display:none;45px;height:45px;background-color: #392e5c;position: fixed;right: 25px;bottom: 25px;z-index:20;'); 20 $topDiv = $('<a href="javascript:void(0);"></a>').html("").appendTo($returnTopDiv); 21 $topDiv.attr('style', '45px;height:45px;display: block;background-image:url(' + $opts.backgroundImage + ')'); 22 $topDiv.bind('click', function () { 23 nhsdpageScroll(); 24 }); 25 window.onscroll = function () { 26 if ((document.documentElement.scrollTop + document.body.scrollTop) > 0) { 27 $returnTopDiv.show(); 28 } else { 29 $returnTopDiv.hide(); 30 } 31 } 32 //Uncaught SyntaxError: Unexpected token ):'<a href="javascript:void(0);"></a>'少void(0)中的'0' 33 } 34 }
调用:
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width" /> 6 <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script> 7 <script src="/Scripts/Extend/nhsdReturnTop.js"></script> 8 <title>ReturnTopZ</title> 9 </head> 10 <body> 11 <div id="vb"> 12 456 13 </div> 14 <div class="vb"> 15 456 16 </div> 17 <script type="text/javascript"> 18 $.nhsd.returnTop(); 19 for (var i = 0; i < 100; i++) { 20 $('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body')); 21 $('<br/>').appendTo($('body')); 22 } 23 </script> 24 </body> 25 </html>