JS源码：网页滚动右下角出现返回顶部goTop

最新推荐文章于 2024-09-30 15:23:15 发布

剑痞

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量118

点赞数 1

分类专栏：简易代码文章标签： javascript html

QQ;691699 E-mail:fim@qq.com http://han.ge

本文链接：https://blog.csdn.net/jianpi/article/details/141362697

版权

简易代码专栏收录该内容

24 篇文章 0 订阅

订阅专栏

直接贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> BLOG.TCSD.NET/JIANPI </TITLE>
  <style type="text/css" media="screen">
#goTop {position:fixed;right:20px;bottom:20px;width:40px;height:32px;padding:8px 0 0;background-color:#69c;border-radius:6px;cursor:pointer;}
#goTop:hover {background-color:#369;}
#goTop:hover .gotop1 {border-left:12px solid #369;border-right:12px solid #369;}
#goTop .gotop1 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #69c;border-right:12px solid #69c;}
#goTop .gotop2 {width:10px;height:10px;margin:0 auto;background-color:#FFF;}
</style>
 </HEAD>

 <BODY>

a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>

<div title="返回顶部" id="goTop" style="display:none;">
	<div class="gotop1"></div>
	<div class="gotop2"></div>
</div>

<script type="text/javascript">
	    function $getId(Id) {
	        return document.getElementById(Id);
	    }
	    var goTop = $getId("goTop");
	    window.onscroll = function () {
	        if (document.documentElement.scrollTop + document.body.scrollTop > 350) {
	            goTop.style.display = "";
	        } else {
	            goTop.style.display = "none";
	        }
	    }
	    goTop.onclick = function () {
	        var Timer = setInterval(GoTop, 10);
	        function GoTop() {
	            if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
	                clearInterval(Timer);
	            } else {
	                document.documentElement.scrollTop /= 1.1;
	                document.body.scrollTop /= 1.1;
	            }
	        }
	    }
	</script>
 </BODY>
</HTML>