这里是生活记录站丨技术站>>



为ZSofa添加简单的滑动置顶功能

Posted by MOPVHS on 2010/03/13 Leave a comment Go to comments




———————-我叫分割线—————————–

ps:嘿嘿，ZWWoOoOo,我又在折腾你的主题了…

———————-我叫分割线—————————–

最近看上了在学前端，顺便做新的个人主页，然后看到了

这个有趣的网站：(前去围观)。这个站的菜单很简洁：

  • The Man
    • 

  • The Gig
    • 

  • The Wonder
    • 

  • Home
    •

    比如按一下”The Man”，页面就会慢慢滚动到”The Man”这一段话的位置，

    好喜欢这个效果… :wink:

    ————–囧——–2010-3-14——

    早上突然想起，Zsofa本身有这种类似功能…大囧…

    如图：

    指导一下？
看看他们说了啥！

    ————–囧——–2010-3-14——

    不过看了看页面源代码，引用了茫茫多的文件，太麻烦。

    于是，谷歌把我引导到了（Hiro’s Blog）

    好吧,我承认Hiro博客顶部那jQuery+Png的动画看得我泪流满面…

    但是，我去他那里的目的正如本文的标题…所以…

    ———————-感激的分割线———————

    感谢zwwooooo和他的“ZSofa”；感谢Hiro还有他的“jquery.scrollTop.js”；

    ———————-感激的分割线———————

    接着，修改开始：

    ———————-又是分割线———————

    1.将header.php中，我后来加的：

    "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"

    删掉，把“jquery-1.4.2.min.js”和“jquery.scrollTop.js”这两个文件上传到ZSofa主题文件夹下。

    2.引用这两个文件，代码如图：

    3.还要在这三句代码下面加上：

    	$(function() {
		$('.simple').scrollTop();	   

		$('.normal').scrollTop({
			'scrollAnimation': 'true',
			'speed': 'normal'
		});

		$('.fast').scrollTop({
			'scrollAnimation': 'true',
			'speed': 'fast'
		});

		$('.slow').scrollTop({
			'scrollAnimation': 'true',
			'speed': 'slow'
		});

		$('.define').scrollTop({
			'scrollAnimation': 'true',
			'speed': '1000'
		});
	});

    最后，Zsofa的底部有个“Top”，就改那里吧。

    Top

    重点是：“class=”slow””

    恩恩，设置成滑动到顶部需要两秒，感觉不错…

    完毕…







    jQuery

    11 Comments.

    1. 阿修

      Google Chrome 4.1.249.1042 Google Chrome 4.1.249.1042 Windows 7 Windows 7

      2010/03/28 10:22 上午 on 1

      提个意见，订阅的滑出框top属性可以设置的大一点，把雪糕盖住了有点不好看~~ :oops:

      回复
    2. 阿修

      Google Chrome 4.1.249.1042 Google Chrome 4.1.249.1042 Windows 7 Windows 7

      2010/03/26 8:27 下午 on 1

      我倒是很好奇你原来的滑到顶端之类的是用什么方法完成的…… :?:

      回复
    3. thinknew

      Google Chrome 4.1.249.1036 Google Chrome 4.1.249.1036 Windows XP Windows XP

      2010/03/25 7:25 下午 on 1

      那登陆让我想起了迅雷~

      回复
    4. Hiro

      Firefox 3.6 Firefox 3.6 Windows 7 Windows 7

      2010/03/13 10:12 下午 on 1

      支持一下，我这插件稍微修改就可以实现自定义了啊，只要把window.scrollTo(0, 0);和$(‘html, body’).animate({scrollTop: ’0′}, speed);中的0设置为变量，自行传值即可了啊！

      回复

    Leave a Reply


    [ Ctrl + Enter ] 订阅评论Feed