零基础学做网站培训介绍

当前位置:

如何制作网站中的“返回顶部”(带缓冲)功能

当网站的版面过长时,用户会使用下拉条进行拖动浏览,当到达第一屏的时候,会出一个“返回顶部”的图标,鼠标放在返回顶部图标上图标颜色变深鼠标点击后平缓平滑返回网页顶部。如何制作网站中的“返回顶部”(带缓冲)功能

 

网站制作“返回顶部”效果的步骤:

  1. 在网站的顶部的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>
  2. 下载顶部JS特效代码文件和“返回顶部”的图片,上传到自己网站根目录下,下载地址:https://pan.baidu.com/s/1dD4a73F
  3. 要实现“返回顶部”的效果,必须自己做网站的版面长度超过一屏以上。

相关阅读:

网站如何制作“返回顶部”按钮(附代码)

网页缓慢返回顶部的JS代码

“返回顶部”按钮制作方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注