jQuery插件实例二：年华时代插件ReturnTop回到首页

浏览数：24 / 时间：2015年06月09日

这个插件功能在于当网页内容高度很高时，方便用户快速回到顶部。核心在于对屏幕高度的获取，定时器的使用，在引用代码后，只使用$.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;width: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‘, ‘width: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>