zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    tomcat 服务器的几个重要监听 方法 与 使用
    webSocket 前端 js 加入 心跳机制 的基本写法
    Palinwords (处理回文串)
    Anti-Rhyme Pairs (求最长公共前缀)
    Extend to Palindrome (顺序Hash和逆序Hash处理回文)
    Milk Patterns (hash + 二分)
    次小生成树
    Borg Maze (BFS预处理+最小生成树)
    P1126 机器人搬重物
    P1141 01迷宫 (记忆化搜索)
  • 原文地址:https://www.cnblogs.com/nhsd/p/3676034.html
Copyright © 2011-2022 走看看