• 域名认证
  • 作品:155
  • 记录:379|
  • 随笔:54|
  • 资源:209|
  • 总访问量:404008|

m 墨鱼部落格

导航菜单
欢迎来到墨鱼博客!
一个简单回到顶部效果-超过高度显示侧边返回顶部按钮

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

浏览次数:

作者: 墨鱼

信息来源:

更新日期: 2017-09-05 22:34:12

文章简介

代码如下:<!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{

  • 正文开始
  • 相关文章

代码如下:

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

收藏此文 ( ) 感觉不错,赞哦! 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏

精彩评论

最近更新作品更多
最新笔记 更多