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

老白 3年前 864浏览 0评论

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

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

1、jQuery:即插即用 返回顶部(基础代码)

2、案例:jQuery 返回顶部(返回顶部、微信、评论、反馈)

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

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

即插即用 javascript实现滚动下拉一定高度后显示返回顶部,默认不显示 js/jQuery 第1张即插即用 javascript实现滚动下拉一定高度后显示返回顶部,默认不显示 js/jQuery 第2张

代码分享:

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

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

发表评论