返回顶部js
backToTop.js:
(function () {
var $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.click(function () {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function () {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function () { $backToTopFun(); });
})();
样式设置:
.backToTop {
display: none;
background:url(../images/go_top.gif);
background-repeat:no-repeat;
background-position:0px 0px;
width:50px;
height:50px;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 2px;
bottom: 2px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
.backToTop:hover
{
background:url(../images/go_top.gif);
background-repeat:no-repeat;
background-position:0px -100px;
}
返回顶部js的更多相关文章
- 弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- gotoTop返回顶部 JS
方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
随机推荐
- HDU3415
题目大意: 给出一个有N个数字(-1000..1000,N<=10^5)的环状序列,找出一个长度不大于k的连续子序列,使其和最大. 分析: 我们可以将环状序列从某处切开,变成一行,然后复制前n- ...
- 如何添加WebService调用时的用户认证
场景: 当把发布好的WebService地址或WSDL提供给调用方时,需要对方先进行身份的认证通过后才允许接口的进步访问.而不是公开的谁都可以调用. 解决: 1.在IIS中设置对应网站的目录访问权限. ...
- Haroopad 写 markdown文本
很好用,推荐大家都来用. http://www.csdn.net/article/2014-05-05/2819623
- Bellman-Ford & SPFA 算法——求解单源点最短路径问题
Bellman-Ford算法与另一个非常著名的Dijkstra算法一样,用于求解单源点最短路径问题.Bellman-ford算法除了可求解边权均非负的问题外,还可以解决存在负权边的问题(意义是什么,好 ...
- Microsoft Visual SourceSafe
Microsoft Visual SourceSafe是美国微软公司出品的版本控制系统,简称VSS.软件支持Windows系统所支持的所有文件格式,兼容Check out-Modify-Check i ...
- Hadoop学习6--里程碑式的开始之执行第一个程序wordcount
一.先在HDFS文件系统创建对应的目录,具体如下: 1.待处理文件存放目录 /data/wordcount(之所以创建wordcount,是为了对文件分类,对应本次任务名) 命令:hadoop fs ...
- 【SQL Server】系统学习之三:逻辑查询处理阶段-六段式
一.From阶段 针对连接说明: 1.笛卡尔积 2.on筛选器 插播:unknown=not unknuwn 缺失的值: 筛选器(on where having)把unknown当做FALSE处理,排 ...
- C++命名空间 namespace的作用和使用解析
一. 为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中 常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C ...
- Shuffle相关分析
Shuffle描述是一个过程,表现出的是多对多的依赖关系.Shuffle是连接map阶段和Reduce阶段的纽带,每个Reduce Task都会从Map Task产生的数据里读取其中的一片数据.Shu ...
- DG_Oracle DataGuard Switchover主备节点切换(案例)
2014-06-09 Created By BaoXinjian Thanks and Regards http://wenku.baidu.com/view/dc9f00d349649b6648d7 ...