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

效果如链接：http://liuyanzhao.com/
只需要i两个步骤：
1.我们在网页body内最上面添加一个，方便跳到这个位置

<span  name="gotop"></span>

2.在网页的末端添加一个：

   <a href="#gotop" >       <img src="__PUBLIC__/img/backTop.png" id="gotop" alt="" style="position: fixed;bottom: 10px;display: none;">   </a>

为了让它页面已经在首部时，图标隐藏

加一段js代码：

<script>    $(function () {        $(function(){            $(window).scroll(function(){                if($(window).scrollTop() > 100){                    $("#gotop").fadeIn(1000);//一秒渐入动画                }else{                    $("#gotop").fadeOut(1000);//一秒渐隐动画                }            });            $("#gotop").click(function(){                $('body,html').animate({scrollTop:0},1000);            });        });    });</script>

---

本文地址：http://liuyanzhao.com/3629.html

转载请注明