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

avatar 2016年12月03日12:56:50 1 4605 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
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

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