博客添加回到顶部按钮

博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的Widgets访问相关的文章)就需要滚动鼠标,移动到页面的头部。比较人性的一个设计是,在页面的底部(或者中靠近下的位置)添加一个“回到页面顶部”的按钮,可以快速定位到文章的顶部位置。

这个功能设计起来不难,可以采用如一文中提到的锚链接形式,例如回到顶部按钮是一个链接:

<a href="#top">Top</a>

将其放到页面底部,点击该链接可以直接定位到页面顶部。但是如果我们不希望用链接来实现呢,而是模拟一个按钮(用span),并且希望按下回到顶部按钮的时候,可以比较平滑地回到顶部,那该怎么做呢?代码非常简单,这里只用到些许的CSS样式以及jQuery代码。

首先在在文章页面body底部添加以下代码(index.php或者single.php):

<span id="back-to-top">Top</span>

为了方便起见,以上按钮的代码在jQuery中创建添加,不需要手动去修改php文件。同时,利用jQuery完成按钮的行为,主要通过监听window的onscroll事件,当滚动距页面顶部超过100px的时候,淡入显示按钮。当滚动距页面顶部少于100px的时候,淡出隐藏按钮。使用jQuery的animate函数,可以实现平滑地滚动效果(利用document.body或者document.documentElement的scrollTop属性完成动画效果)。

添加的jQuery代码如下所示:

/* Add a back to top button */
function back_to_top()
{
    /* Cache back-to-top button object */
    var $top = $('<span id="back-to-top">Top</span>').appendTo('body');

    /* Cross-browser compatible in scrollTop */
    var $body = (!window.opera) ? $('html, body') : (document.compatMode == 'CSS1Compat'
        ? $('html') : $('body'));

    if ($top.length == 0)
         return;
 
    /* Hide back-to-top button at first */
    $top.hide();
 
    /* Fade in back-to-top button when need */
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
 
    /* Scroll to top when click back-to-top button */
    $top.click(function () {
        $body.animate({ scrollTop: 0 }, 800);
    });
}

back_to_top();

同时在博客样式(style.css)中添加以下自定义的样式内容:

#back-to-top {
    background-color: #F5F5F5;
    bottom: 0;
    box-shadow: 0 0 6px #808080;
    color: #444444;
    padding: 5px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

这里将按钮固定定位到(position: fixed)页面右下角,并且添加边框阴影等效果。

最后附上一段区分外部链接的代码片断(摘自Learning jQuery 3rd edition)

    /* Add tag next to the external link */
    $('.column .post-entry a').not(':has(img)').filter(function() {
        return this.hostname && this.hostname != location.hostname;
    }).addClass('external').attr('target', '_blank');

JavaScript 最佳实践

原文链接:http://www.javascripttoolbox.com/bestpractices/
翻译声明:非逐句逐字翻译,若有翻译不当,纯属搞笑。
翻译状态:未完成

介绍

这篇文档是一份清单,它罗列了一系列开发JavaScript代码的最佳的编程实践和首选的编程方法。文档中的每条内容都基于JavaScript社区中众多开发者的意见和经验总结而来。但是,这些条款仅仅是一些建议,而并非需要绝对遵守的原则,一些经验丰富的开发者对于以下描述的内容,可能会持有些许不同的意见。

始终使用var关键字

JavaScript中变量只有两种作用域范围:全局作用域和函数作用域, 使用var关键字对于保持变量作用域清晰是至关重要的。当声明一个变量作为全局变量或者函数级的变量(译者注:函数内部声明的变量,也就是在函数内部的局部变量), 始终在声明的最前面添加var关键字。下面的例子强调不使用var关键字会造成的潜在问题:

不使用var造成的问题

var i=0; // 正确:通过声明创建了一个全局变量
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // 警告:全局变量i的当前值为10

继续阅读

Remove Google Redirection

This user script has been published on UserScripts.org for near one year, which is made to prohibit click-tracking and prevent redirection in the Google search results. I'm very surprised by so many downloads in UserScripts.org, about 6,805 times. I think many people really need this function provided by this script. So I have decided to update it since last update about three months ago.

What and Why

You can read this blog “Block Google from Click Tracking Web Search Results” for more information about "what is click-tracking and how it track user click event".

Sometimes click-tracking and URL redirection are very annoying, especially when Google is not well accessible for some reason. In this case, we need a method to remove this, so we can directly visit the original site URL rather than indirectly through Google.

Support and Feedback

Because of some technical reasons, the previous versions didn't support very well when Instant Search is on. And the Google search URLs were not listed completely in the @include metablock of UserScript. Now this script support both instant on and instant off search, and I added the missing URLs in the @include. You can add your favorite Google search URLs as you like.

继续阅读

缘网大杀器

脚本由来

这个脚本可是好老好老了,大概1年半前写的吧。那个时候人还在深圳出差,晚上回宾馆无聊就开始折腾这个。最初的时候我只是写了一个去广告的样式,将 缘网 一些根深蒂固的悬浮广告隐藏掉,让页面干净点。可惜好景不长,缘网改动了页面结构,结果我的样式就失效了。在校内使用的同学在98的帖子后面反馈,我马上用Firebug查看,改样式,又可以用。接下来的好几天,就这样一直在拉锯战,不知道是我RP不好,刚好遇到缘网在改页面还是其它原因,至今我也不大清楚了。

后来,我也厌倦了经常要改样式,而且纯粹样式在缘网页面下稳健性太差了,因为缘网的页面几乎没有一个有id或者class属性的元素,定位某个元素基本上都需要使用父子兄弟等选择器,结果就是缘网一改就挂。最后,我将该脚本分成两个部分:一部分是用Greasemonkey或者Scriptish安装的用户脚本;另外一部分是用Stylish安装的用户样式。

用户样式中首先将页面的所有内容全部隐藏:

/* Hide anything first */
body > * { display: none !important; }

继续阅读

天气预报脚本 Weather Forecast

脚本地址: http://j.mozest.com/zh-CN/userscript/script/9/ (主脚本)
脚本依赖: http://userscripts.org/scripts/show/99374 (天气图标)
脚本最新版本:0.8.3
安装要求:Firefox + Scriptish或者Firefox + Greasemonkey

简介

本脚本目前仅支持Firefox浏览器,通过webxml网站提供的Webservice API获得天气数据,数据来源于中国气象局。它的数据大概每隔2.5小时左右自动更新一次,包括大约340多个中国主要城市和60多个国外主要城市三日内的天气预报数据。

根据web服务提供网站的接口文档说明:

免费用户24小时内查询不超过50次并且获取二次数据大于间隔 600ms。官方数据2.5小时更新一次,本脚本也是按照2.5小时的间隔作缓存处理,因此在该间隔时间内, 若再次查询则返回缓存的信息。因此以上规定对我们使用该服务不会造成影响。

以下分别介绍脚本的使用方法、用户配置及错误反馈等内容。

继续阅读

如何为单篇文章添加自定义的样式

在看到一些Demo教程页面的时候,突然想到一个问题,在做Demo的时候往往需要插入一些单独的与Demo相关的样式,这些样式是如何添加的呢?

因为接触WordPress不久,起初我只是联想到在自定义博客的时候搜索到的模板页面(参考给你的wordpress新建独立的tag页面),本博客的Archives、Categories等页面都是采用这种方法实现的,但后来仔细一想觉得这种方法太不切实际了,那岂不是要给每个页面都添加一个模板页面。

然后,我又想WordPress的编辑/发表文章的HTML编辑框可否添加样式<style>,试了下发现确实可以,不过自然地添加的样式是追加在所跟随文本的后方,而不是在<head>内。

有没有一种方法可以在<head>中添加一小段为本文章而单独设定的样式呢,而又类似在编辑框中那样可以方面的添加样式内容? 经过万能的Google搜索,找到一篇与我的问题非常契合的博客Custom CSS Per Post。文中作者提供了两个可以选择的方法,两者都可以在主题的function.php中添加少量代码实现,而无需为止安装额外的插件。

继续阅读

JavaScript 面向对象编程一:类型系统

本系列均参考了大量网上相关的内容,并基于此总结并归纳,作为个人笔记,也供同样与我一样初涉JavaScript面向对象编程的同学一同学习讨论。

前言

网上有非常多的介绍JavaScript类型的内容,关于类型的分类众说纷纭,各执一词,一些矛盾的观点往往会让我们感到非常困惑。后来我仔细想了 想,与其在这种泥苦苦挣扎,还不如就近找一根救命稻草抓住。当然,这种观点可能比较激进,但是有时候确实需要做些取舍与选择。选择一种你觉得相对比较正 确,并且可以接受的答案。

类型系统

本文的类型分类依据来源于aimingoo的博客中关于JavaScript类型的几篇博客文章[1][2][3]

Javascript有两套类型系统:基础类型系统与对象类型系统。

继续阅读

Chrome 的 Content Scripts 扩展开发

这篇博客以讲解Chrome的 Content Scripts 扩展开发过程为主,并在该过程中穿插与Greasemonkey用户脚本的比较。本人初次尝试Content Scripts类型的扩展,有不足之处,请不吝指出。

前言

现在使用Chrome浏览器的用户越来越多,在写用户脚本的时候有时候必须得同时考虑多个浏览器的兼容情况(当然比起前端开发要简单多了)。我一般仅考虑Firefox和Chrome两个浏览器,原因有以下几个:

  1. 相比之下,两者的用户群体比较大,因为会寻找用户脚本的朋友一般都在用这些浏览器,很少是IE的,至少是同样采用Webkit内核的搜狗、傲游等。
  2. 两者的内核中对JavaScript的实现相对比较遵循W3C规范,因此只要尽量避免使用特定于某个浏览器的功能,一般的情况脚本都可以通用。
  3. 两者的用户脚本格式比较接近,前期是Chrome兼容Firefox的Greasemonkey扩展的格式,现在两者估计很多地方都是互相借鉴的。

继续阅读