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


    这个插件功能在于当网页内容高度很高时,方便用户快速回到顶部。核心在于对屏幕高度的获取,定时器的使用,在引用代码后,只使用$.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>
  • 相关阅读:
    mac 10.9 安装 gevent
    flash builder4.7 for Mac升级AIRSDK详解
    重走java--Step 3
    重走java--Step 2
    重走java---Step 1
    web初学之MVC
    web初学之JavaBean
    微信公众号开发之开发模式的启用——学习笔记
    微信公众号开发之开通账号——学习笔记
    web初学之request,session与application
  • 原文地址:https://www.cnblogs.com/nhsd/p/3676034.html
Copyright © 2020-2023  润新知