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

时间：2024-09-22 08:06:19

这个插件功能在于当网页内容高度很高时，方便用户快速回到顶部。核心在于对屏幕高度的获取，定时器的使用，在引用代码后，只使用$.nhsd.returnTop();即可实现效果

效果图：

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

代码：

 ;

 function nhsdpageScroll() {

     var timeInterval;

     if ((document.documentElement.scrollTop + document.body.scrollTop) == 0) {

         clearTimeout(timeInterval);

     }

     else {

         window.scrollBy(0, -1000);

         timeInterval = setTimeout("nhsdpageScroll();", 100);

     }

 }

 jQuery.nhsd = {

     returnTop: function () {

         $opts = {

             backgroundImage: '/Images/Extend/top1.png'

         };

         viewHeight = window.screen.availHeight;//屏幕可用工作区高度

         $returnTopDiv = $('<div></div>').appendTo($('body'));

         $returnTopDiv.attr('style', 'display:none;width:45px;height:45px;background-color: #392e5c;position: fixed;right: 25px;bottom: 25px;z-index:20;');

         $topDiv = $('<a href="javascript:void(0);"></a>').html("").appendTo($returnTopDiv);

         $topDiv.attr('style', 'width:45px;height:45px;display: block;background-image:url(' + $opts.backgroundImage + ')');

         $topDiv.bind('click', function () {

             nhsdpageScroll();

         });

         window.onscroll = function () {

             if ((document.documentElement.scrollTop + document.body.scrollTop) > 0) {

                 $returnTopDiv.show();

             } else {

                 $returnTopDiv.hide();

             }

         }

         //Uncaught SyntaxError: Unexpected token ):'<a href="javascript:void(0);"></a>'少void(0)中的'0'

     }

 }

调用：

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script>

     <script src="/Scripts/Extend/nhsdReturnTop.js"></script>

     <title>ReturnTopZ</title>

 </head>

 <body>

     <div id="vb">

         456

     </div>

         <div class="vb">

         456

     </div>

     <script type="text/javascript">

         $.nhsd.returnTop();

         for (var i = 0; i < 100; i++) {

             $('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body'));

             $('<br/>').appendTo($('body'));

         }

     </script>

 </body>

 </html>

相关文章