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

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

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 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>

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

标签: 返回顶部
masonry+imagesloaded+infinitescroll三大jQuery插件实现瀑布流无限图片懒加载效果
« 上一篇 2017年09月05日
帝国CMS会员注册时加入问答验证-经常更换,防注册机
下一篇 » 2017年09月16日
  • jQuery“返回顶部”滑动过度效果
    1453阅读0条评论77个赞
    东西很简单,还是利用jQuery,直接在网站底部文件加代码:<a href="#" id="top"> 返 回 顶 部 </a>CSS代码,使用了fixed让对象固定于浏览器窗口:#top{position:fixed;bottom:0;right
最近发布作品
更多

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