一个简单回到顶部效果-超过高度显示侧边返回顶部按钮

  • 时间:2017-12-23 21:24 编辑:admin 来源:88源码网 阅读:464
  • 扫一扫,手机访问
摘要:一个简单回到顶部效果-超过高度显示侧边返回顶部按钮

代码如下:

<!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>


  • 全部评论(0)
资讯详情页-文字区下方-通栏
最新发布的资讯信息
【源码教程|dz自用备忘录】网站ip域名被墙(被封锁、被屏蔽、被和谐)和dns污染的解决办法(2019-07-06 00:01)
【源码教程|奇客Api支付系统使用教程】淘宝红包(旺信群)免签通道配置说明(2019-07-05 03:29)
【源码教程|奇客Api支付系统使用教程】支付宝转银行卡免签通道配置说明(2019-07-05 03:27)
【源码教程|奇客Api支付系统使用教程】钉钉群收款免签通道配置说明(2019-07-05 03:27)
【源码教程|】新双跳转卡模式配置说明(2019-07-05 03:25)
【源码教程|奇客Api支付系统使用教程】微信转卡配置说明(2019-07-05 03:24)
【源码教程|奇客Api支付系统使用教程】地区风控设置(2019-07-05 03:23)
【源码教程|奇客Api支付系统使用教程】农信易扫通道配置说明(2019-07-05 03:22)
【源码教程|奇客Api支付系统使用教程】手动抢单说明(2019-07-05 03:22)
【源码教程|】民生一码通配置(2019-07-05 03:21)
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明
CopyRight 2016-2020 云客资源网 | 黑ICP备17009420号
中国站长资源交易平台:云客网 |阿落博客 | 无能者
  借力推 | 云客文化传播 | 帮帮网赚 | 哈尔滨永泰电梯 | 在线编码转换 | 站长工具 | 爱站网 | IP138 | 找源码 | ATOOL在线工具 | 网站之家 | 站长分类目录 | 卢松松博客 | 小白源码网