全代码打造简洁美观回到顶部按钮

标签: 开源 jQuery | 发表时间:2012-09-01 23:08 | 作者:潜行者m
出处:http://fairyfish.net

这次,潜行者m给大家带来一个比较实用的 jQuery 技巧,为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。

点击之后就会跳转到顶部,然后这个按钮平滑消失。与网上的相比,潜行者m版的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码。废话不多说,下面就开始制作。

HTML 结构

我使用了 a 标签作为这个结构,可能不太标准,但是比较方便。在 a 标签中,内置了一个 span 标签,用来显示三角号。具体代码如下:

  <a id="gotop" href="#">   
  <span>▲</span> 
</a>

对,你没看错,就这么简单的一句代码,直接在 a 标签中,填写一个三角号。剩下的就是使用 CSS 进行样式控制。

CSS 代码

  
#gotop{ 
	display:block;  
	width:60px; 
	height:60px;
	position:fixed;  
	bottom:50px;  
	right:40px; 
	border-radius:10px 10px 10px 10px;   
	text-decoration:none;  
	display:none;  
	background-color:#999999;     
}

上面这段代码,定义了 a 标签的外观样式,定义 display 为 block,这样,我们才能指定它的 width 和 height。定义 position 为fixed,让它固定在右下角。同时为它指定圆角,就是使用 border-radius 属性,定于半径为10px的圆角。

  
#gotop span{ 
	display:block; 
	width:60px; 
	color:#dddddd; 
} 
#gotop span:hover{ 
	color:#cccccc; 
} 
#gotop span{ 
	font-size:40px; 
	text-align:center; 
	margin-top:4px; 
}

上面这一段,就是定义了 span 标签里面的三角号,至于如何打出这个“三角号”,使用搜狗输入法,按下“Ctrl + Shift + z”,就会弹出搜狗的特殊字符,就可以找到了。这几句代码意思很简单,就是定义了三角号的外观样式,同时制定了颜色变化,这是为了用户体验。最下面的 margin-top:4px,则是用来准确定位三角号,让它居中显示。

jQuery 代码

具体的 jQuery 代码如下,解析已经写在注释里面了:

  
$(function(){
	$(window).scroll(function(){  //只要窗口滚动,就触发下面代码 
		var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 
		if( scrollt >200 ){  //判断滚动后高度超过200px,就显示  
			$("#gotop").fadeIn(400); //淡出     
		}else{      
			$("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动   
		}
	});
	$("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
			$("html,body").animate({scrollTop:"0px"},200);
	});
});

怎么样,简单吧?就用这几句代码而已,就可以出现这个功能,而且可以方便的修改颜色、形状、大小等。当然缺点也是有的,就是在IE6等过时的浏览器中,可能不会兼容,无法实现。

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博:
新浪微博: http://weibo.com/wpjam
腾讯微博: http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关 [代码 按钮] 推荐:

全代码打造简洁美观回到顶部按钮

- - 我爱水煮鱼
这次,潜行者m给大家带来一个比较实用的 jQuery 技巧,为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮. 这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部. 点击之后就会跳转到顶部,然后这个按钮平滑消失. 与网上的相比,潜行者m版的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码.

如何改进 Google +1 按钮的代码让它读取的更快

- 木頭 - 谷奥——探寻谷歌的奥秘
为网站设计的Google +1按钮发布以来,谷奥就立刻部署上了,但大家也发现了一个严重的问题──谷奥网站打开速度变慢了,Google +1按钮总要等上数秒甚至是数十秒才能读取完毕出现在页面里. 今天Aaron Peters给出了几个优化的意见,大家可以参考一下. 首先是一定不要把那段Javascript代码放在标签里,这样会拖慢整个网页的打开速度.

Facebook已读按钮 – 它不是按钮,点击请小心

- SotongDJ - 36氪
在Facebook的F8大会上,大家的注意力都被新版的时间线个人档案页面所吸引,可能有人意识到之前传言的已读、已看、已听按钮却并没有在这次大会上发布. 不过通过安装一些品牌报纸的社交阅读应用,读写网的Richard MacManus发现了一些端倪. 假如你安装了华盛顿邮报在Facebook上的社交阅读应用,当你在阅读一篇文章时,无论你有没有点击Like按钮,无论你有没有点击推荐按钮,系统都会自动将你现在阅读的内容发送到Facebook上.

图解添加Google+1按钮过程

- Genius - cnBeta.COM
据国外媒体报道,Google今天在其搜索结果页面中推出了社交搜索“+1”按钮,但该功能目前只向部分人开放. 要使用该功能,首先必须在 https://profiles.google.com/中建立Google个人档案.

电商网站的购买按钮

- Fay - 所有文章 - UCD大社区
一般上电子商务网站买东西的用户分三种:. 这样的需求反应到产品页的购买按钮上,我们一般会看到购买和收藏两个按钮,而购买又可以分为立即购买和加入购物车两种. 对于第一种用户来说,你按钮做的再大再合理也不关他的事,因为他压根就不想买. 对于第二种用户来说,购物车按钮或是收藏按钮对他来说是优先选择的按钮,因为他过一段时间才买.

CSS3 按钮 一分钟教程

- Yangan - Poboo
作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(button), 已经不能符合网站发展趋势,这里给大家一个很小的教程,只要短短一分钟,你就可以掌握CSS定义按钮的技巧,通过举一反三,做出自己喜欢的css按钮.. 现在开始,我们先完成一个基本的按钮设计. 接下来 我们完成圆角设计, 我们要感谢css3, 因为完成圆角 只需要3行代码 就可以搞定.

Google +1 按钮明日推出

- HRS - cnBeta.COM
Google今天官方宣布“+1按钮”功能将于明日正式上线,任何网站都可以添加这一社交代码来获得用户的推荐,同时Google Analytics工具也开始添加有关+1按钮的分析数据,帮助网站运营方统计受欢迎的信息,其功能和作用跟Retweet和Facebook的Like一样.

11个CSS3按钮制作教程

- Ben - 我爱互联网
css3作为一个新技术,尽管某些浏览器不支持,但在过去的6个月里,css3已然吸引了设计师和Web开发人员的注意力. 实际上,有了CSS3,可以创建更好网站. 在本文,Jean-Baptiste Jung 整理收集了11个在CSS3中制作漂亮按钮的教程. 用CSS3和RGBA制作超酷按钮. 用CSS3制作Google风格按钮.