利用jQuery加了个“返回顶部”滑动效果

东西很简单，还是利用jQuery，直接代码：

html代码，一般放在footer.php里：

 
<a href="#" id="top"> 返 回 顶 部 </a>

CSS代码，使用了fixed让对象固定于浏览器窗口：

 
#top{position:fixed;bottom:0;right:10px;}

jQuery代码，注意正常使用的几个条件：

 
$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);return false;});

OK，此文完！

PS1：刚修改了下代码高亮插件wp-syntax的默认字体，记录下，修改“wp-syntax/geshi/geshi.php”中第442行的“var $overall_style =”后面的字体。

PS2：发现又是一个月过去了……时间呀时间，岁月也岁月……

2009年12月1日：代码升级，添加多种滑动，可移步：《“返回顶部”加强版代码及释义》

2009-11-30

fensi!
十一月 30, 2009 20:24:20 #1

你的小站真是越看越喜欢

回复
- 林木木
  十一月 30, 2009 20:32:20
  
  哈哈，多谢多谢，我也坚持在细节上不断不断改进呢1
  
  回复
- 淘定商城
  七月 18, 2010 07:53:7
  
  谢谢分享啊。
  
  回复
A.shun
十一月 30, 2009 21:11:21 #2

经常看到很多教程，想往主题里面加
又发现inove都有了。。
惰性就是这么来的

回复
- 林木木
  十一月 30, 2009 21:39:21
  
  哈哈，INOVE主题的确非常非常强大，不过自己一点点折腾的有感觉！
  
  回复
  - A.shun
    十一月 30, 2009 21:59:21
    
    是啊，所以我是很羡慕你和Old man这样的主题作者
    
    回复
    - 林木木
      十一月 30, 2009 22:20:22
      
      zww,老男人……
      
      回复
万戈
十一月 30, 2009 21:30:21 #3

你已经为jquery走火入魔了
我终于知道JQ和JS实现的返回顶部的区别了，谢木木

回复
- 林木木
  十一月 30, 2009 21:42:21
  
  很早就想加上了，现在是什么效果第一个想到的就是用jQuery……
  
  回复
  - 万戈
    十一月 30, 2009 21:45:21
    
    我是什么效果第一个想到的是CSS，因为我只有在日志页加载了jQuery，不能在整站用上同一个效果，比如说返回顶部～
    
    回复
    - 林木木
      十一月 30, 2009 21:57:21
      
      我是全部都加载了的，所以不在乎那么一行啦~~哇哈哈
      
      回复
fensi!
十一月 30, 2009 21:38:21 #4

要是把这个返回顶部旁边放个登陆什么的咋样
我试了下。。。问题是
怎么让它判断浏览者状态挖让作者显示管理游客显示登录呢。。。
感觉好烦啊~~~~~

回复
- 林木木
  十一月 30, 2009 21:58:21
  
  WordPress默认的那个函数就是自动的呀，登录了现实管理，没登录就现实登录呀~
  
  回复
  - fensi!
    十一月 30, 2009 22:03:22
    
    内个函数是嘛？
    
    回复
    - 林木木
      十一月 30, 2009 22:24:22
      
      <?php wp_register(); ?>
      <li><?php wp_loginout(); ?></li>
      <?php wp_meta(); ?>
      
      这几个？WordPress默认主题的sidebar.php里拿出来的
      
      回复
koobai
十一月 30, 2009 21:42:21 #5

jQuery代码应该怎么放，怎么调用~~~

回复
- 林木木
  十一月 30, 2009 21:58:21
  
  可以看下相关文章里的，或者搜索下~呵呵，我懒了
  
  回复
SATURN
十一月 30, 2009 21:45:21 #6

jQuery太强大了

回复
- 林木木
  十一月 30, 2009 21:59:21
  
  是JS强大，jQuery只是简化了我们使用的过程1
  
  回复
- 番茄网络创业者
  十月 8, 2010 10:32:10
  
  你左边这个动态浮动效果的返回顶部的图片很有个性哦。
  
  回复
admoit
十一月 30, 2009 21:50:21 #7

果然效率哦~
真加上滑动顶部按钮咯~嘿嘿

回复
- 林木木
  十一月 30, 2009 22:00:22
  
  哈哈，既然有需求就要满足嘛！
  
  回复
老饕
十一月 30, 2009 21:53:21 #8

速度是不是慢了点？

回复
- 林木木
  十一月 30, 2009 22:25:22
  
  设成了800ms，差不多了，在快就不用jQuery了，直接用CSS锚点跳就行了
  
  回复
keon
十一月 30, 2009 22:00:22 #9

现在使用的主题已经有了～～虽说以前也用JS折腾过～～

回复
- 林木木
  十一月 30, 2009 22:27:22
  
  这个实现方法还是挺多的~
  
  回复
gil
十一月 30, 2009 22:56:22 #10

我用的是全站滑动

回复
kangzj
十二月 1, 2009 09:50:9 #11

木木太牛了，效果不错
岁月无情啊

回复
- 林木木
  十二月 1, 2009 22:49:22
  
  用图片的了，上下都有了~
  
  回复
Dianso
十二月 1, 2009 10:15:10 #12

效果很好

回复
- 林木木
  十二月 1, 2009 22:49:22
  
  现在的用图片的了，加上了向下滑动，HOHO
  
  回复
Louis Han
十二月 1, 2009 11:05:11 #13

看到很多人家了很帅

回复
- 林木木
  十二月 1, 2009 22:50:22
  
  对访客来说很友好的一个小功能，得加上！
  
  回复
zwwooooo
十二月 1, 2009 12:55:12 #14

汗～你也加了，我昨天也加了个，不过我的是top和bottom一起加

回复
- 林木木
  十二月 1, 2009 22:51:22
  
  参考你网站的JS也整了个~哈哈
  
  回复
左岸读书
十二月 1, 2009 13:50:13 #15

这个回到顶部还有animate效果！

回复
- 林木木
  十二月 1, 2009 22:52:22
  
  animate是自定义动画，什么CSS属性都可以设个时间，弄成动画似的。
  
  回复
willin
十二月 1, 2009 20:16:20 #16

我的電梯有上有下, 而且是無段變速喔.

回复
- 林木木
  十二月 1, 2009 22:55:22
  
  刚整了上下，变速这个还不懂……
  
  回复
ooaixt
十二月 1, 2009 22:04:22 #17

简洁实用，我喜欢

回复
- 林木木
  十二月 1, 2009 22:55:22
  
  嘻嘻，多谢支持~
  
  回复
GEZ鸽子
十二月 1, 2009 23:09:23 #18

这个顶部滑动挺好看！支持了！

回复
- 林木木
  十二月 1, 2009 23:26:23
  
  多谢多谢，睡咯~
  
  回复
licream
十二月 1, 2009 23:20:23 #19

博主，你的博客相当不错
能告诉我，你那显示地理位置和浏览器还有系统这是用什么显示的呢

回复
- 林木木
  十二月 1, 2009 23:27:23
  
  多谢支持，很多东西我都写出来了哦~
  http://immmmm.com/wordpress-plugin-comment-info-detector.html
  
  回复
  - licream
    十二月 2, 2009 12:24:12
    
    谢谢哈
    
    回复
AlvinJ
十二月 2, 2009 00:19:0 #20

学习了~
这个主题很简洁大方！

回复
- 林木木
  十二月 2, 2009 12:08:12
  
  哈，多谢多谢~
  
  回复
winy
十二月 2, 2009 04:17:4 #21

刚采用了你的主题，紧密跟进~

回复
- 林木木
  十二月 2, 2009 12:15:12
  
  鼓励折腾！
  
  回复
一块冰儿
十二月 2, 2009 08:53:8 #22

啊！老大改了CSS 用原版主题的要注意把那个(‘#footer’)改成(‘#foot’)要不向下是不起作用的~~

回复
- 林木木
  十二月 2, 2009 12:16:12
  
  还是把原来的footer.php里的id=”foot”改成id=”footer”吧，原来写得不规范……
  
  回复
ShuaiGe.Me
十二月 2, 2009 10:11:10 #23

额，效果不错。。。

回复
- 林木木
  十二月 2, 2009 12:17:12
  
  正在考虑再加点其他的，嘻嘻~
  
  回复
金冈
十二月 2, 2009 11:53:11 #24

哈哈，厉害，思路很棒，貌似运动方式（阻尼运动或线性运动）不好定义吧。

回复
- 林木木
  十二月 2, 2009 12:18:12
  
  这个还没研究，实现绝对是能实现的，不过代码肯定要十几行了……
  
  回复
  - 金冈
    十二月 2, 2009 12:27:12
    
    function ScrollTo($acceleration,$time){
    try{
    var $x=Math.max(document.documentElement.scrollLeft||document.body.scrollLeft,window.scrollX),
    $y=Math.max(document.documentElement.scrollTop||document.body.scrollTop,window.scrollY),
    $speed=1+$acceleration;
    if($x>0||$y>0){
    if($x>$speed||$y>$speed){
    window.scrollTo(Math.floor($x/$speed),Math.floor($y/$speed));
    window.setTimeout(ScrollTo($acceleration,$time),$time);
    }else{
    window.scrollTo(0,0);
    }
    }
    }catch(e){};
    };
    
    回复
  - 金冈
    十二月 2, 2009 12:29:12
    
    你的思路很棒
    
    回复
    - 林木木
      十二月 2, 2009 12:36:12
      
      自个儿夸自个儿？
      
      回复
      - 金冈
        十二月 2, 2009 12:38:12
        
        我说你的思路很棒，贴出来的代码是我在别的地方看到的
        
        回复
        
        林木木
        十二月 2, 2009 14:57:14
        
        我也是参考过来，然后自己整理下，弄出最简的代码~
        
        回复
Hobo
十二月 2, 2009 12:02:12 #25

很方便的东西，不过和你博客的配色不太搭调

回复
- 林木木
  十二月 2, 2009 12:20:12
  
  暂时凸显点吧，说不定不就的将来是把主题的配色给改了哦……
  
  回复
铵铵
十二月 3, 2009 03:37:3 #26

我使用的仿淘宝的回到顶部,
不过林的更人性化,更标准.

回复
- 林木木
  十二月 6, 2009 09:37:9
  
  呵呵，自己写的代码好懂些~
  
  回复
孤夜狂狼
十二月 3, 2009 13:29:13 #27

　嗯～　效果不错～　值得学习……
不过总觉的放在这个主题里面显得有点唐突……

回复
- 林木木
  十二月 6, 2009 09:38:9
  
  暂时先这样吧，没找到好素材……
  
  回复
蓝冰
十二月 6, 2009 09:33:9 #28

左侧箭头火狐下无效

回复
- 林木木
  十二月 6, 2009 09:38:9
  
  额，代码删多了，现在已修复
  
  回复
Vincer
二月 11, 2010 17:39:17 #29

前天，我看见一高人，他全站都是AJAX。搞的还挺好，哪天学习学习。木*5，你会全站AJAX么？那东西貌似很难弄额。

回复
Eric
五月 23, 2010 13:13:13 #30

不得不说这是实现基础的滑动效果最简洁的方法了~测试通过~~

回复
- 林木木
  五月 23, 2010 15:05:15
  
  是的，jquery库JS封装的非常好，使用起来简便呀！
  
  回复
小闇
八月 14, 2010 19:29:19 #31

這肯定是最簡單的，我家就加上了easing效果~還是很小很小

回复
老七
九月 21, 2010 02:18:2 #32

我喜欢这个效果

回复
番茄网络创业者
十月 8, 2010 10:34:10 #33

这种代码能不能做成固定浮动效果？就是不要缓冲形式，让人拉动网页感觉不到这个返回顶部的图片没有在动的效果。

回复
spark
二月 11, 2011 17:23:17 #34

请问 jquery代码加到哪里啊？

回复
- cgrabbit/兔了吧唧网
  二月 11, 2011 18:42:18
  
  加到你的js文件里面或者在需要的页面添加也可以！、
  
  回复
- 林木木
  二月 12, 2011 16:45:16
  
  请先搜索～
  
  回复
spark
二月 11, 2011 18:03:18 #35

其实 css也不太确定 style.css里吗？

回复
qite
三月 26, 2011 02:25:2 #36

嘿嘿，添加了~~~转载了哈

回复
钱侃部落格
四月 24, 2011 21:36:21 #37

不错哦

回复
囧啊囧
七月 17, 2011 20:48:20 #38

没有跳到评论框的快捷按钮了不方便啊不方便

回复
- 林木木
  七月 19, 2011 15:55:15
  
  很早很早就去掉了……
  
  回复
  - 囧啊囧
    七月 19, 2011 16:07:16
    
    这个可以有。
    
    回复
一个人
七月 31, 2011 11:47:11 #39

谢谢！！！用你的办法问题已经解决博客也很漂亮···· 你用的是衡天的主机吧··········谢谢·····

回复
- 林木木
  八月 1, 2011 14:29:14
  
  嗯，横天的~
  
  回复