位置：广州松河 > 技术支持 > 即插即用 javascript实现滚动下拉一定高度后显示返回顶部，默认不显示_js/jQuery

即插即用 javascript实现滚动下拉一定高度后显示返回顶部，默认不显示_js/jQuery

来源：网络整理时间：2023/3/4 1:03:52 共 3650 浏览

个人还是挺喜欢这种即插即用的代码，特别是关于返回顶部的！

之前就有介绍过几篇都是关于返回顶部的特效代码，都比今天要分享的更为全面，拿来即用，所以如果不是研究返回代码的话，可以参考以下几篇文章：

1、jQuery：即插即用返回顶部（基础代码）

2、案例：jQuery 返回顶部（返回顶部、微信、评论、反馈）

3、为zblogPHP等网站添加返回顶部、QQ、旺旺、二维码等在线客服功能的特效代码教程

本文即将要介绍的一款就是在滚动下拉到一定高度，自动显示返回顶部，默认不显示，仅仅是显示：

代码分享：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>即插即用 javascript实现滚动下拉一定高度显示返回顶部，默认不显示</title>
</head>
<body>
<style type="text/css"> 
#top_div{ position:fixed; bottom:80px; right:0; display:none; } 
</style>
<script type="text/javascript"> 
 window.onscroll = function(){
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  var top_div = document.getElementById( "top_div" ); 
  if( t >= 500 ) { 
   top_div.style.display = "inline"; 
  } else { 
   top_div.style.display = "none"; 
  } 
 } 
</script>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<a name="top">顶部<a>
<div id="top_div"><a href="#top">返回顶部</a></div>
<br />
<br />
<div> 这里尽量多些<br />
  以便页面出现滚动条，限于篇幅本文此处略去 </div>
</body>
</html>

目前大多数网站都采用如此显示的方法，在初始状态下是不显示返回顶部图标的，之后在下拉到一定高度后，才会触发并显示返回顶部！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：scrollTop、offsetHeight和offsetTop等属性用法详解_js/jQuery | ·下一条：[前端新手必看]HTML、CSS常用单词汇总_CSS学习