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

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

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

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>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1a name="top">
    顶部a>
    div id="top_div">
    a href="#top">
    返回顶部/a>
    /div>
    br />
    br />
    div>
     这里尽量多些br />
      以便页面出现滚动条，限于篇幅本文此处略去 /div>
    /body>
    /html>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！