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的更多相关文章

  1. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  2. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  3. gotoTop返回顶部 JS

    方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  7. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  8. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  9. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

随机推荐

  1. Maven修改镜像仓库地址

    修改maven根目录下的conf文件夹中的setting.xml文件,如果你修改了默认仓库的存储位置,即.m2文件夹下没有本地仓库,但是有个setting.xml文件,那就修改这个文件就可以. 具体内 ...

  2. Lvs+Keepalived+Squid+Nginx负载均衡

    前言* 随着互联网IT行业的发展,越来越多的企业开始使用开源软件搭建自己的web架构,主流的LVS也得到了广泛的应用,在保证高可用的同时,用户对网站的体验速度也有了很高的要求,这时候需要我们在我们的架 ...

  3. C++ 11中的右值引用以及std::move

    看了很多篇文章,现在终于搞懂了C++ 中的右值以及std::move   左值和右值最重要的区别就是右值其实是一个临时的变量 在C++ 11中,也为右值引用增加了新语法,即&&   比 ...

  4. Python 模块学习:re模块

    今天学习了Python中有关正则表达式的知识.关于正则表达式的语法,不作过多解释,网上有许多学习的资料.这里主要介绍Python中常用的正则表达式处理函数. 方法/属性 作用 match() 决定 R ...

  5. 3. c的输入输出

    putchar与getchar操作输入输出通道 #include <stdio.h> #include <ctype.h> main(){ int c; while((c = ...

  6. 7. redis优化

    一. redis使用上的优化 精简键名和键值 键名:尽量精简,但是也不能单纯为了节约空间而使用不易理解的键名. 键值:对于键值的数量固定的话可以使用0和1这样的数字来表示,(例如:male/femal ...

  7. CF 161D Distance in Tree 树形DP

    一棵树,边长都是1,问这棵树有多少点对的距离刚好为k 令tree(i)表示以i为根的子树 dp[i][j][1]:在tree(i)中,经过节点i,长度为j,其中一个端点为i的路径的个数dp[i][j] ...

  8. 《精通SQL Server 2008》笔记

    7.3触发器的使用 7.4游标的使用 8索引/关系图/完整性 9用户管理

  9. SDcard进行文件的读取

    平时我们需要在手机上面存储想音频,视频等等的大文件,以前学过使用File进行存储(使用File操作进行存储):由于考虑到手机本身的存储空间小,这时候我们需要把文件存储在SDcard中,今天自己也学习了 ...

  10. 安装java开发环境jdk,安装JDK

    JDK可以理解为翻译官,它将Java高级语言翻译为二进制执行. JDK可以编译文件,编译后的文件扩展名为.class. 只要能支持JDK的地方,JAVA就可以运行,这就是JAVA跨平台的性质. 我的是 ...