两种返回顶部BackToTop特效代码

现在位置：首页 > 网站设计 > 两种返回顶部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

评论一下分享本文赞助蓝叶