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

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

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

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

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

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

加一段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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

转载请注明