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

只需要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.             });
  11.             $("#gotop").click(function(){
  12.                 $('body,html').animate({scrollTop:0},1000);
  13.             });
  14.         });
  15.     });
  16. </script>
本文地址:http://liuyanzhao.com/3629.html 转载请注明

发表评论

目前评论:1

  • avatar test-sens

    qqqq