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

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

浏览次数:

作者: 墨鱼

信息来源:

更新日期: 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{

墨鱼部落格源码模板8折活动

  • 正文开始
  • 相关文章

代码如下:

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

《一个简单回到顶部效果-超过高度显示侧边返回顶部按钮》文档下载.doc

转载请注明:帝国模板 » 一个简单回到顶部效果-超过高度显示侧边返回顶部按钮

标签:返回顶部
收藏此文 感觉不错,赞哦! () 打赏本站

如本文对您有帮助,就请墨鱼抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
masonry+imagesloaded+infinitescroll三大jQuery插件实现瀑布流无限图片懒加载效果
« 上一篇 2017年09月05日
帝国CMS会员注册时加入问答验证-经常更换,防注册机
下一篇 » 2017年09月16日

精彩评论