JS--回到顶部代码
原文地址：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
JS--回到顶部代码的更多相关文章
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- 兼容IE，chrome 等所有浏览器 回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- jquery方法回到顶部代码
<style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
随机推荐
- 关于Java集合的总结
(一)List: ArrayList 以数组实现.节约空间,但数组有容量限制.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组,因此最好能给出数组大小的预估值.默认第一 ...
- 新闻:型牌男装：网上订服装，如何将返修率降到5个点以下 | IT桔子
新闻:型牌男装:网上订服装,如何将返修率降到5个点以下 | IT桔子 型牌男装:网上订服装,如何将返修率降到5个点以下
- 掌握 Java 8 Lambda 表达式
Lambda 表达式 是 Java8 中最重要的功能之一.使用 Lambda 表达式 可以替代只有一个函数的接口实现,告别匿名内部类,代码看起来更简洁易懂.Lambda 表达式 同时还提升了对 集合 ...
- c语言结构体在内存中存储，字节对齐
注意: 出于效率的考虑,C语言引入了字节对齐机制,一般来说,不同的编译器字节对齐机制有所不同,但还是有以下3条通用准则: (1)结构体变量的大小能够被其最宽基本类型成员的大小所整除: (2)结构体每个 ...
- mybatis学习笔记第一讲
第一步:先配置mybatis配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE confi ...
- GridView出现不完整--GridView删除滚动条
GridView显示不完毕的原因是由于,他的外层也套用了一个滑动的控件,解决办法就是重写GridView,是控制GridView不能滚动,就是写一个类继承GridView 代码例如以下 public ...
- bit、byte、位、字节、字符串等概念
原始文章:http://djt.qq.com/article/view/658 1.古代送信:马车,烽火,信鸽 2.1837年,世界第一条电报诞生, 美国科学家莫尔斯尝试用一些“点”和“划”来表示不同 ...
- [ASP.NET] 檔案讀寫權限問題
今天遇到一個問題,環境如下: IIS Server: Server 2008 R2 沒加域 File Server: Server 2003 加域 當我的Web程序需要把位於File Server的一 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- DTO学习系列之AutoMapper（一）
一.前言 DTO(Data Transfer Object)数据传输对象,注意关键字“数据”两个字,并不是对象传输对象(Object Transfer Object),所以只是传输数据,并不包含领域业 ...