2014-07-28 16:43:38 jquery+CSS实现简单大方独立的返回顶部 返回头部特效,开始不显示返回头部图标,鼠标向下拉网页出现返回头部图标,鼠标放在返回顶部图标上图标颜色变深鼠标点击后平缓平滑返回网页
jquery+CSS实现简单大方独立的返回顶部 返回头部特效,开始不显示返回头部图标,鼠标向下拉网页出现返回头部图标,鼠标放在返回顶部图标上图标颜色变深鼠标点击后平缓平滑返回网页顶部。
返回网页顶部特效截图
本返回顶部特效特点:
1、JQ实现,兼容各大浏览器
2、只有返回头部按钮,简单大方
3、CSS可以修改返回顶部图片大小
4、可修改返回头部图标,修改替换为你想要的返回头部图标
可修改CSS说明:
- .up{width:54px;height:54px;background:url(images/topback.gif) no-repeat 0 0;<br />
- filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}<br />
- .up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
以上CSS是设置返回顶部图标的引人代码与宽度高度,鼠标进过半透明效果对应CSS代码,可任意修改为你需要的效果即可。
返回顶部使用说明:
1、对应写入CSS代码
2、将scrolltopcontrol.js和jquery.js两个文件引人HTML即可。
在线演示:
在线打包下载: