当网站的版面过长时,用户会使用下拉条进行拖动浏览,当到达第一屏的时候,会出一个“返回顶部”的图标,鼠标放在返回顶部图标上图标颜色变深鼠标点击后平缓平滑返回网页顶部。
网站制作“返回顶部”效果的步骤:
- 在网站的顶部的head标签中插入JS调用代码和样式。
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/scrolltopcontrol.js"></script>
<style>
.up{width:54px;height:54px;background:url(/images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha<p>(Opacity=100);-moz-opacity:1;opacity:1;}
</style></p>
- 下载顶部JS特效代码文件和“返回顶部”的图片,上传到自己网站根目录下,下载地址:https://pan.baidu.com/s/1dD4a73F
- 要实现“返回顶部”的效果,必须自己做网站的版面长度超过一屏以上。