帝国CMS教程:前端通用的超过一定高度就显示侧边返回顶部按钮

搬瓦工机场JMS

代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script><style>

p#top{ positiON:fixed;display:none;bottom:100px;right:80px;}  

p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;}  

p#top a:hover{ color:#979797;  }  

p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;}  

#top a:hover span{background:url(top.png) no-repeat center;} 

</style>

<script>

$(document).ready(function(e) {

//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失  

        $(function () {  

            $(window).scroll(function(){  

                if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头 

                    $("#top").fadeIn(1500);  //大于1500行时跳转箭头慢慢透明显示

                }  

                else  

                {  

                    $("#top").fadeOut(1500);  //大于1500行时跳转箭头慢慢透明消失

                }  

            });   

            //当点击跳转链接后,回到页面顶部位置  

            $("#top").click(function(){  

                $('body,html').animate({scrollTop:0},1000);//1s完成回到顶部  

                return false;  

            });  

        });  

   

});

</script>

</head>

 

 

<body>

<div style="width: 100%;height: 2000px;"></div>

<p id="top">

<a href="#top">

<span></span>

返回顶部

</a>

</p>  

</body>

</html>

未经允许不得转载:Just My Socks中文教程网 » 帝国CMS教程:前端通用的超过一定高度就显示侧边返回顶部按钮

赞 (0) 打赏

相关攻略

    暂无内容!
Just My Socks搬瓦工机场JMS

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏