页面锚点平滑缓冲跳转JS代码

上篇给博客升了级,准备换个皮,试了几个都不甚理想,于是在现有基础上,自己动手改造一下。

随时记一些进展,今天给博客底部加上了TOP锚,运用了JS “页面锚点跳转平滑滚动”特效,这样从博客底部返回顶部更轻松些,以下是从灵活家园找到的代码。

JS引用

<script type="text/javascript" src="你的域名/script/smooth.js"></script>

JS代码

右键另存为,下载“页面锚点跳转缓冲”JS源码,我就不贴源码了。

Demo

在主页底部找到“Fly”,点一下飞上来。

注意

此代码的强大在于不需要你做另外其它的设置,自动实现所有锚链接的效果,你可以随便建立任何锚点链接都能够识别而应用,只须将对象的 ID 前面加 # 作为链接对象即可,而且可以自定义滑动的速度

本来想应用WP的MG12皮肤来实现这个功能,但是它的JS函数没有现在这个灵活。这个JS无需给链接增加行为,自动侦察页面的锚链接,从而实现页内锚的缓冲平滑滚动。

需要注意的是,一定要给链接定义ID,不能仅仅使用#,比如我的调用是这样的,z-bloger可以参考一下:

锚点:<div id="divTop">

锚链:<a id="gotop" href="#divTop">Fly</a>

题外话

本来还准备搞个源码高亮显示,后来发现过程太繁锁,而且需要改动z-blog源码,这为以后升级会太来麻烦,于是放弃。

还要说一下,目前博客页面正在调整改造过程中,如发现页面支离破碎,请见谅。

  • quote 1. 流芒阿辉
  • http://www.liumangahui.com
  • fly的速度比较慢...哈哈...博客升级了,整体没变.但文章内页跟首页导航不一致了,一进内页,找了好一会首页Haha,用户体验完毕...
    birder 于 2009-2-13 16:55:32 回复
    3Q,在改首页,内页还没动
  • 2009-2-13 15:59:53 回复该留言
  • quote 2. 我是牙医
  • http://yayi.org
  • 换个合适的皮真不容易,我现在的皮也不满意.
    birder 于 2009-2-13 16:56:00 回复
    开始就准备换你那张皮,后来发现不是很合适
    我是牙医 于 2009-2-13 22:49:33 回复
    我皮肤上"享受每一天"怎么变成大号字啊/现在这个字小了点啊.
    birder 于 2009-2-15 20:04:22 回复
    没看到"享受每一天"
    我是牙医 于 2009-2-18 8:29:08 回复
    就是“我是牙医”的下边!!
    birder 于 2009-2-24 8:40:00 回复
    <div id="tagline">享受每一天</div>

    应该是定义这个CSS,
    http://yayi.org/themes/inove/style/inove.css

    #tagline {
    color:#FFF;
    border-top:1px solid #FFF;
    text-decoration:none;
    font-size:10px;
    float:left;
    padding:0 3px;
    }
    font-size:10px; 改成12px
    我是牙医 于 2009-2-25 10:41:16 回复
    谢谢!
  • 2009-2-13 16:01:28 回复该留言
  • quote 5.
  • http://endjiaer.com
  • 一段时间没来,好多专业的文章呢~
    吸血中……
    birder 于 2009-2-19 18:56:21 回复
    正在修皮中,比较乱,还在总结

  • 2009-2-19 17:25:53 回复该留言
  • quote 6. 我是牙医
  • http://yayi.org
  • 我首页上的Archives和Categories能不能由原来的横排变成竖排的呢?
    birder 于 2009-2-26 11:00:31 回复
    找到对应的CSS定义,
    <div id="westsidebar" class="sidebar">
    <div class="widget widget_categories">

    加个clear:both;或者去掉float:left;
    改之前先备份,多试试,看看有没有其它关联的CSS定义
    #westsidebar {
    width:121px;
    float:left;
    padding-right:5px;
    font-size:95%;
    overflow:hidden;
    }
    我是牙医 于 2009-2-26 15:25:28 回复
    相对应的CSS在哪?
  • 2009-2-26 10:31:21 回复该留言
  • quote 7.
  • 我怎么移动起来没有加速度缓冲的效果呢,大哥求助!
  • 2011-1-4 16:41:29 回复该留言

评论恒久远,一贴永流传

提交

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

帮助他人 - 快乐自己

最近发表

Search

热门文章

随机推荐

卓越新书

Top

Powered By Z-Blog 1.8 Walle Build 100427

© 2007-2011 zfnn.com. 皖ICP备07503469号