zoukankan      html  css  js  c++  java
  • 达到一定高度,回到头部的代码

    <script type="text/javascript">
    $(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})
    </script><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>返回顶部代码</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style> @charset "utf-8"; html, body, h1, h2, h3, h4, h5, h6, hr, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, img { margin:0; padding:0; } body, button, input, select, textarea { font:14px/1.8 "Microsoft Yahei", tahoma,arial,"Hiragino Sans GB", helvetica, sans-serif; } img { border:0;} .wraper { height:2000px; text-align:center; margin:0 auto; padding-top:20px; width:960px; background-color:#F7F7F7; font-size:22px; color:#FF0000; } .gotop { position:fixed; right:50%; bottom:20px; margin-right:-580px; } .gotop-btn { display:block; width:62px; height:52px; background:url(images/gotop.png) no-repeat 0 0; text-indent:-9999px; } .gotop-btn:hover { background-position:0 -54px; } </style> <script type="text/javascript" name="jquery" src="js/jquery-1.8.3.js"></script> </head>
    <body>
    <div class="wraper">鼠标往下滚动然后注意右下角,有惊喜!</div>
    <div class="gotop">
    <
    a href="javascript:document.body.scrollTop=0;document.documentElement.scrollTop=0;void(0);" class="gotop-btn" title="回到顶部" style="display:none; ">回到顶部</a>
    </
    div>

    <script type="text/javascript">
    $(window).scroll(function(){$(this).scrollTop()>400?$(".gotop-btn").css("display","block"):$(".gotop-btn").hide()})
    </script>
    </body> </html>

  • 相关阅读:
    25款有用的桌面版博客编辑器
    iOS开发- &quot;duplicate symbol for architecture i386&quot; 解决的方法
    中国眼下拥有的人造卫星的种类及其作用
    深入浅出JMS(一)——JMS简单介绍
    android之【本地通知Notification】
    蓝牙设计
    html5中的容器标签和文本标签
    amaze ui中的icon button
    amaze ui表格斑马纹效果
    amaze ui响应式表格
  • 原文地址:https://www.cnblogs.com/feika/p/4462725.html
Copyright © 2011-2022 走看看