滚动返回页面顶部的JS特效

  主题footer有个“返回页顶”的按钮,是用#top实现的,点一下就蹭地跳到页顶了,太不优雅,不符合我的美学概念。这本是个芝麻绿豆的小事情,可我没事就喜欢捣腾Wordpress,我想能改用JS滚动效果该有多好呀。还真的让我找到了,远在天边,近在眼前,这款主题的作者zEUS已经写过这样的教程,不过据他反应因锚点冲突,导致博客评论分页失效,所以zEUS已经弃用了此特效。我试了一下,可能我的Wordpress适应能力强一些,并没有评论分页失效的情况,呵呵。我就拿来主义一下,把此特效分享给大家。

  1、点此下载gototop.js文件,解压后将该文件上传至主题目录下。

  2、将以下代码添加到footer.php文件中。

<script src="<?php bloginfo('stylesheet_directory'); ?>/gototop.js" type="text/javascript" charset="utf-8"></script>

  3、在footer.php中合适的位置加入以下代码调用上述JS。

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

  简简单单三步就添加了滚动返回页面顶部的JS特效,效果可以参看我的页底“返回页顶”按钮,很不错吧,嘿嘿。

 » 转载请注明来源:Life Studio » 《滚动返回页面顶部的JS特效》
 » 本文链接地址:http://wange.im/go-to-top-js.html
 » 订阅本站:http://feed.wange.im

本文已盖 25 层楼

  1. 回复 少杰 CHINA Internet Explorer Windows 说:

    不折腾。路过、、、

  2. 回复 sa CHINA Google Chrome Windows 说:

    效果还不错

  3. 回复 小虫 CHINA Internet Explorer Windows 说:

    呃 有没有到底部的代码 就是那种一下子到底部的。 还有JS到底部的。2个都想要。

  4. 回复 小雯子 CHINA Mozilla Firefox Windows 说:

    我最近正想要做这个呢,省事了,啊哈哈

  5. 回复 短歌行 CHINA Internet Explorer Windows 说:

    好东西,过来看看。

  6. 回复 小明猪 CHINA Internet Explorer Windows 说:

    哈哈,正常正常,我以前也一直想着如何能让我那边显示页面的时候是先半透明然后渐渐过渡显示出来的效果,但没找着,自己又不会写,无奈····路过支持你这里一下,可惜我不用这个功能咯~

  7. 回复 alswl CHINA Mozilla Firefox Windows 说:

    iNove主题中集成了这段代码,效果还是不错的,挺自然

  8. 回复 willin CHINA Mozilla Firefox Windows 说:

    我找了一會, 才發現在下面頁腳, 本還以為在旁邊隨窗口跑哩..
    這和以前的 a href=”#top” 動作一樣, 但畫面增加滾動的效果, 看得舒服多了!
    還有, 搬遷服務器之後我把 gzip 方式停了, 已有更好方法, 改天再公怖.

  9. 回复 漢文溪 CHINA Internet Explorer Windows 说:

    哈哈 好技巧 好功夫 没事走两步 练上几招 :mrgreen:

  10. 回复 Jutoy CHINA Mozilla Firefox Windows 说:

    嘿嘿,我的也是通过JS实现的。不过我淘来的那个JS不但能往上还能往下~~

  11. 回复 mint CHINA Internet Explorer Windows 说:

    我需学习学习,给自己的页面右下角加一个小图标,上写top,这样更惹眼。

  12. 回复 一米 CHINA Internet Explorer Windows 说:

    你可以去mg12的博客看看,有一篇文章专门介绍这个效果的。

  1. 滚动返回页面顶部的JS特效 - 大杂门 CHINA WordPress
  2. 0blog CHINA WordPress

Leave a comment

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析