时间:2016-04-03 16:14 来源: 我爱IT技术网 作者:佚名
在网页添加返回顶部功能,不仅能增强用户体验还能让网页变得更有趣,下面就来介绍【如何向网站添加返回顶部功能】
前期准备工作(包括相关工具或所使用的原料等)
台式电脑/笔记本电脑代码编辑器(如notepad++、dreamweaver等)详细的操作方法或具体步骤
首页用好搜搜索关键词【返回顶部 素材家园】(如图),在搜索结果中打开排名第一的网站,这里有很多返回顶部代码的demo,大家可以选一款适合自己网站的;在这里我选择了这一款(如下图),可以先预览demo,然后下载到电脑上!


下载解压后,得到如下图的文件和文件夹,index.html是该效果的HTML代码页面、js文件夹是js存放目录、images文件夹是存放图片的目录、css文件夹是存放样式表的目录,如下图所示




然后我们用代码编辑器打开index.html,这里小编使用的是dreamweaver,打开后的效果如下图所示,然后按照图片上的说明将代码复制到你需要添加返回顶部特效的页面里面。

以上几步都完成后,请将解压目录下面的js文件夹、images文件夹、js文件夹复制到你站点的目录。这里需要注意文件路径,否则效果是不会出来的哦!
最后就大功告成啦,大家可以看看效果!

注意事项
复制代码时候注意代码放的位置注意js文件、css文件、图片文件的路径经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。作者声明:本教程系本人依照真实经历原创,未经许可,谢绝转载。- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
