一条来自曾经的 willin kan 大神的滚动条

我没有调用 jQuery。

我木有调用 jQuery！

我居然木有调用 jQuery！

在我生物回头考的最后阶段我脑子回想的就是这样的一句话，我总算明白了为什么这几天折腾的滚动条就是不显示。前几天实在是想不通啊~！明明只是一段代码的引用啊，明明是一段放哪里都可以生效的js代码啊，明明别的几个小站都很成功啊，明明查看网页源代码可以看到，可是为什么审查元素时的 CSS 是display:none;！

我已经记不清楚我是做了生物卷子上的哪道题目让我豁然开朗，让我意识到了这个埋头苦思几百万年都不一定想得到的极品问题。

我没有调用 jQuery。那我那一整个上午究竟在折腾什么！！

不过，不管怎样，我的心情还是很美好，下面让我开开心心地介绍一下这段来自 WordPress 曾经的大神 willin kan 的滚动条代码。

遗作
Willin kan 大神已经不在 WordPress，但是他的精神与人格会永存，他曾经的作品将会被人们永远铭记。谨以此 One Piece 截图来表示我最崇高的敬意。

下面开始堆代码。

<script type="text/javascript">// Mouseover Scrolling
jQuery.noConflict();
jQuery(document).ready(function($) {
$('body').append('<div id="scrollbar"><div id="up">&#9650;<\/div>&#9737;<div id="dn">&#9660;<\/div><\/div>'); // append div
$('#up').mouseover(function(){ up();            // scroll up
      }).mouseout(function(){ clearTimeout(fq); // stop
      }).click(function(){
         if (getY() == 0) return;               // reach top
         $('#scrollbar').fadeOut(function(){ self.scrollTo(0, 0); $('#scrollbar').fadeIn(); }) // jump up
      });
$('#dn').mouseover(function(){ dn();            // scroll dowm
      }).mouseout(function(){ clearTimeout(fq); // stop
      }).click(function(){
         if (getY() + document.documentElement.clientHeight >= document.body.offsetHeight) return; // reach bottom
         $('#scrollbar').fadeOut(function(){ self.scrollTo(0, document.body.offsetHeight); $('#scrollbar').fadeIn(); }) // jump dowm
      });
}); // end jQ
function getY(){
   posY = typeof(window.pageYOffset) == 'number' ? window.pageYOffset : document.documentElement.scrollTop; // current position
   return posY;
}
function up(){
   $area = jQuery(window);
   $area.scrollTop($area.scrollTop() - 40); // steps = -40
   fq = setTimeout("up()", 10);             // frequency
}
function dn(){
   $area = jQuery(window);
   $area.scrollTop($area.scrollTop() + 40); // steps = +40
   fq = setTimeout("dn()", 10);             // frequency
}
/* CSS */
bs = 'box-shadow: rgba(0,0,0,.3) 1px 5px 11px;';
br = 'border-radius: 17px;'; // round corner
document.write('<style type="text\/css">'
   + '#scrollbar {position:fixed; top:'       // ("position:fixed" not works in IE6, but I don't care.)
   + (document.documentElement.clientHeight * 0.24)       // 24% window height  
   + 'px; right:6px; height:74px; width:16px; padding:10px; font:15px/25px Arial; cursor:default;'
   + '-moz-'+ bs +'-webkit-'+ bs + bs                     // box-shadow
   + '-moz-'+ br +'-webkit-'+ br + br +'}'                // border-radius
   + '#up:hover, #dn:hover {cursor:pointer; color:#bbb;}' // hover color
   + '<\/style>');
// -- END -- //
</script>

至于使用效果，我也不多说了，看右边，看右边！大概我这五年内的博客右侧滚动条都不会再变了吧，黑白颜色外加纯代码，很百搭。

如果还有什么要说的话，请参看本文开头的三句。

以上。

P.S. 生物考试是很枯燥的考试，物理考试是很有趣的考试。但是当我在生物考试快结束时灵机一动意识到本文初的问题时，我有把物理考试翘掉回家改代码的冲动。

再次 P.S. 我觉得还是说一下这个滚动条有什么好的吧，因为它实在是太好了~！

首先，鼠标移到上下符号时，页面就会滚动了；其次，鼠标点击上下符号时，页面就会跳到页首页尾了，一闪而过的赶脚让人超惊喜；再次，中间那个方向盘居然只是起装饰作用；但是，它却是装饰得那么完美，那么朴素，那么有技术含量！啊，我要厥倒了！

注，使用说明，复制代码，WordPress 就在主题里 header 或 footer 或 sidebar 或某Ｘ找个空位子放着就行，空位子怎么找自己看；WordPress 还可以新建“文本”小工具，粘贴代码，拖至边栏保存即可；此代码适用于但不只限于博客程序，别地方要用扒过去即可。

啊拉啊拉，这就是 JavaScript 的魅力所在啊~！（笑）

两年后补记

女人还真是善变啊，明明说五年都不变心，却不料一年不到即已沧海桑田。

然而滚动条的效果还是要 show off 一下的，不然看官会觉得我的赞美是夸张。

所以特意在此文内引用了下上段代码，为防变故，我也还截了个图。

一条滚动条

补记完

« 继续阅读 »

Read More