Html页面增加返回顶部图标和隐藏出现

avatar 2016年12月03日12:56:50 1 4207 views
博主分享免费Java教学视频，B站账号：Java刘哥
只需要i两个步骤： 1.我们在网页body内最上面添加一个，方便跳到这个位置
  1. <span  name="gotop"></span>
2.在网页的末端添加一个：
  1. <a href="#gotop" >
  2.       <img src="__PUBLIC__/img/backTop.png" id="gotop" alt="" style="position: fixed;bottom: 10px;display: none;">
  3.   </a>
为了让它页面已经在首部时，图标隐藏 加一段js代码：
  1. <script>
  2.     $(function () {
  3.         $(function(){
  4.             $(window).scroll(function(){
  5.                 if($(window).scrollTop() > 100){
  6.                     $("#gotop").fadeIn(1000);//一秒渐入动画
  7.                 }else{
  8.                     $("#gotop").fadeOut(1000);//一秒渐隐动画
  9.                 }
  10.             });
  12.             $("#gotop").click(function(){
  13.                 $('body,html').animate({scrollTop:0},1000);
  14.             });
  15.         });
  16.     });
  17. </script>
本文地址：http://liuyanzhao.com/3629.html 转载请注明
历史上的今天
十二月
03日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0