原文地址：http://www.cnblogs.com/liguiqiang1986/articles/3132023.html

JS--回到顶部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>

    <title>咿呀网-回到顶部代码</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta property="wb:webmaster" content="16bbac153114060f" />

    <meta name="keywords" content="咿呀网,回到顶部代码">

    <meta name="description" content="咿呀网,回到顶部代码">

    <link href="css/main.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" charset="utf-8" src="js/public.js"></script>

  </head>

  <body>

    <div style="height:800px;text-align: center;">

              欢迎来到咿呀网，此技术由<a style="color:red" target="_blank" href="http://www.yy606.com">咿呀网(www.yy606.com)</a>提供，欢迎大家使用<br>

               此代码无版权所有，不管你是商业还是个人，都可放心使用，往下拖动可预览效果。<br>

              <a href="top.zip">回到顶部代码-源码下载</a><br><br><br><br>

             <a style="color:red" target="_blank" href="http://www.yy606.com">点击进入咿呀网(www.yy606.com)</a><br>

             技术交流 QQ群:22160972 邮箱：362217990@qq.com<br>

    </div>

    </body>

</html>

main.css

@charset "utf-8";

body{background:#f6f5f4;font-size:12px;color:#707070;font-family:"宋体",Arial, Helvetica, sans-serif;text-align:center;border: 0px; margin: 0px 0px 0px 0px;}

/**回到顶部按钮样式**/

#top_btn{word-break:break-all;position:fixed;border-radius: 6px;right:140px;bottom:150px;background:white;z-index:; display: none;

      -moz-transition:background 1s;

      -webkit-transition:background 1s;

      -o-transition:background 1s;}

#top_btn a {display:block;width:50px;height:50px;background-image:url("../images/top1.png");background-repeat:no-repeat;border-radius: 6px;}

#top_btn a:hover {background-image:url("../images/top2.png");}

/** add by Da Luo en**/

准备两张图片：

top1.png:top2.png:

Js:    另外还需要jquery的js文件：jquery-1.7.min.js

//回到顶部按钮

$(document).ready(function(){

    var n=0;

    var x=0;

    var top_btn = $("<span id='top_btn'><a title='回到顶部' href='#top'></a></span>");

    $("body").append(top_btn);

    $("body").attr("id","top");

    var fe=$("#top_btn");

    window.onscroll=function(){

        x=(document.body.scrollTop||document.documentElement.scrollTop)+n;

        if(x==0){fe.fadeOut().hide()}else{fe.fadeIn().show()};

    };

});

目录结构：

css

　　--main.css

images

--top1.png

--top2.png

js

--jquery-1.7.min.js

--public.js

index.html

 
 

posted on 2013-06-11 19:30 BIGBIRD大鸟 阅读(13) 评论(0)  编辑 收藏

JS--回到顶部代码的更多相关文章

  1. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  2. 兼容IE，chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  3. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  4. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  5. listView从底部回到顶部代码实现

    可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...

  6. js回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  9. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  10. js回到顶部 动画速度 （自己记录）

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. alert 在手机浏览器会显示网址，怎么能去掉这个网址

    之前就看到有人发过这帖子,现在自己也遇到这问题了. 目前想到的一个解决方案,是用jquery的模拟的alert插件进行代替,可是找的几个插件都不能实现alert的阻塞功能.怎么破 ,具体解决方案如下: ...

  2. linux自动交互工具expect，tcl安装和安装包，以及自动互信脚本

    linux自动交互工具expect,tcl安装,以及自动互信脚本 工作中需要对几十台服务器做自动互信,无意中发现expect命令,研究一番. 在网上找了许多资料也没有安装成功,摸索着总算成功了.现分享 ...

  3. 【Spark】Spark的Shuffle机制

    MapReduce中的Shuffle 在MapReduce框架中,shuffle是连接Map和Reduce之间的桥梁,Map的输出要用到Reduce中必须经过shuffle这个环节,shuffle的性 ...

  4. UIActivityIndicatorView-初识IOS

    UIActivityIndicatorView是一个加载动画的视图,一般加载一个网页页面之前会经常用到. 上一个随笔,我讲到了页面加载的页面的那些代理方法 - (void) viewWillAppea ...

  5. bat处理文件

    bat处理文件 作用:可以一次性执行多个命令的文件. 为什么要学bat处理文件? 快速运行一个软件一般都会把软件打包一个jar包,但是jar双击可以运行仅对图形化界面的软件起作用,对于控制台的程序是不 ...

  6. DEV LookUpEdit 使用方法

    public class field { public string Name { get; set; } public string Explain { get; set; } } List< ...

  7. AngularJs练习Demo7

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. mysql 权限分配及创建新用户

    前言 本文主要是介绍mysql创建新用户命令及赋予权限等命令,为了便于理解,文中会给出相关示例.通常情况下,创建用户,修改mysql密码,授权,是需要有mysql里的root权限. 1.创建用户: / ...

  9. 网页title标题的闪动效果

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见. 显示信息数: <input type="text" id="t ...

  10. hibernate多对多映射文件详解（一）

    1.仓库表属性 public class WarehouseNew implements java.io.Serializable { // Fields private static final l ...