蓝叶

蓝叶分享emlog模版、emlog插件、zblog插件、zblog模版、帝国模版、绿色软件、蓝叶原创作品等众多精选好资源。
现在位置:首页 > 网站设计 > 两种返回顶部BackToTop特效代码

两种返回顶部BackToTop特效代码

蓝叶    网站设计    2012-10-17    10151    2评论    

页面太长用鼠标滚轮和鼠标往下拉页面,这样不利于用户体验,就在网上找了返回顶部backtotop的效果代码,这个效果网上有多炫的好看的,但为了简单和速度就选择了一个没有什么效果的代码,只需要把代码放到相应的位置就能实现返回顶部了。附件以及代码安装说明请看一下内容:

第一种样式:在</head>代码前调用jquery文件
<script src="jquery-1.7.1.js" type="text/javascript"></script>
然后在网站底部</body>前调用特效js文件
<script type="text/javascript" src="scrolltopcontrol.js">
把附件里的gotop.gif图片文件上传到网站目录下刷新页面就可以看到效果了。
scrolltopcontrol.js有记事本打开可以设置自定义图片和显示位置。

第二种样式:在</head>代码前调用jquery文件<script src="jquery-1.7.1.js" type="text/javascript"></script>
然后在后面加入<body>后面加入<a name="gotop" id="gotop"></a>
在网站底部前面加入代码<a name="gobottom" id="gobottom"></a><div class="go">
<a title="返回顶部" class="top" href="#gotop">至顶</a>
<a title="留言评论" class="tocomment" href="#comment-place">发表评论</a>
<a title="返回底部" class="bottom" href="#gobottom">至底</a></div>
最后把CSS样式复制到你网站CSS样式表里保存,刷新页面就看到效果了,就如我博客现在的效果。
附件下载:返回顶部特效代码.rar 72KB
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
黎健雄
黎健雄2012-10-20 13:26回复
#2
有空才学习一下~~~
奇遇
奇遇2012-10-19 01:39回复
#1
沙发
加载中....
快捷导航 返回顶部
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部