JavaScript 模块插件程序之返回顶部插件

最新推荐文章于 2024-07-26 20:46:33 发布

Junezm

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量508

点赞数 1

分类专栏： JavaScript 模块程序文章标签： javascript jquery 插件

本文链接：https://blog.csdn.net/Junezm/article/details/51303549

版权

JavaScript 模块程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本程序为基于jQuery的返回顶部插件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>返回顶部小插件</title>
    <style type="text/css">
      *{ padding:0px; margin:0px;}
      #gotop{
	   width:54px; 
	   float:right;
           position:fixed; 
           right:50px;
           bottom:15px;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
   <div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">
   <div>
   <a id="gotop" href="javascript:void(0)"><img src="images/topback.gif" value="返回顶部"></a>
   </div>
   <script type="text/javascript">
    function b(){       //当前显示的DOM到DOM顶部的距离大于1px，则显示返回顶部的模块
    	var h=$(window).height();           //获取当前浏览器可视窗口的高度
	    var t =578+$(document).scrollTop(); //当前DOM文件可见的顶部到实际顶部的高度+578px（根据自己的浏览器可以窗口设置，下面的alert可以帮你获取当前浏览器的可视高度h,我的浏览器可视高度为578px）
	    //alert("h="+h+",t="+t);
	   if(t > h){                     //有部分DOM被滚动到不见的上面部分就显示返回图片，否则隐藏
		$("#gotop").fadeIn();
	    }else{
		$("#gotop").fadeOut();
	    }
     }
   $(document).ready(function(e) {  //单击返回图标返回DOM顶部
	    b();
	    $('#gotop').click(function(){
		$(document).scrollTop(0);	
	});
    });
   $(window).scroll(function(e){  //窗口中时时调用b（）判断是否显示返回顶部模块
	     b();	
   });
   </script>
</body>
</html>

博主在网上看了很多网站的返回顶部代码，经过修改这是我认为最精简的，不到50行代码，是不是很简单，不懂的可以留言，博主会尽力让你明白。

Junezm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 模块插件程序之返回顶部插件

本程序为基于jQuery的返回顶部插件返回顶部小插件 *{ padding:0px; margin:0px;} #gotop{ width:54px; float:right; position:fixed; right:50px; bottom:15px
复制链接

扫一扫

专栏目录