现在位置:首页 > 网站设计 > 两种返回顶部BackToTop特效代码

两种返回顶部BackToTop特效代码

作者:蓝叶 分类:网站设计 时间:2012-10-17 浏览:10486 评论: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

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

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

清空信息
关闭评论
黎健雄
黎健雄游客
#2
有空才学习一下~~~
2012-10-20 13:26回复
奇遇
奇遇游客
#1
沙发
2012-10-19 01:39回复
音乐欣赏