JavaScript 是很好的发明, 它让网页动了起来. 大家都喜欢这样的那样的页面效果, 所以 JS 的使用日益广泛, 甚至被依赖. 但你务必提醒自己, 绝大多数的浏览器都支持 JavaScript, 但不是全部.

上一篇文章中我简单地讲解了如何使用 JavaScript 实现滑动置顶效果. 那段调用 JS 代码的 HTML 片段曾经被我修改过两次. 这次我们将会以它为例, 讲解为什么不能完全依赖 JavaScript 并如何进行处理.

1. 最初版本

清晰, 简洁, 也可以实现滑动效果

1

<a href="javascript:goTop();">Top</a>

因为操作的动作会被暴露在浏览器的状态栏中, 如果函数很多参数或者很多动作, 那么就会看到很长的一串, 看起来别扭而不美观.

2. 修改版本 1

于是我将代码修改了一下, 将真正被调用的 JS 方法隐藏起来, 代码如下:

1

<a href="javascript:void(0);" onclick="goTop();">Top</a>

解决了上一个问题, 状态栏只会显示 "javascript:void(0);" 字样, 而同样存在滑动效果. 处理流程如下:

从流程中, 我们可以看到另一个问题, 两个事件都是 JavaScript 动作, 如果 JS 被禁用或者浏览器不支持, 那么点击按钮后一点反应都没有.

3. 修改版本 2

为了兼顾没有 JavaScript 支持的浏览器, 我又修改了一下代码:

1

<a href="#" onclick="goTop();return false;">Top</a>

我们得了解一下链接的被点击后的处理顺序, 首先 onclick 事件会被触发, 接着是转跳到 href 指向的链接, 我在 onclick 的最后加上 return false; 就是为了中断处理, 不转往 href 指定链接处.

如果浏览器支持 JavaScript, 滑动到顶部后中断处理; 如果浏览器不支持 JavaScript, 则不会执行 onclick 方法, 直接转跳链接的锚回到顶部 (没有滑动效果, 但却是能回到顶部). 处理流程如下:

现在已照顾得算比较周全了, 但还是不够完美. 更极限一些其实我们可以将 JavaScript 代码和页面代码分离, 在 document ready 或者 onload 的时候加载页面代码.www.cssfan.cn

4. 未来版本

我准备在新的模板中将 JS 完全分离出来, 日后我会专门起贴讨论这种做法, 包括什么应该在 document ready 时加载,