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. DHCP协议讲解

    一.DHCP服务介绍: DHCP为动态主机配置协议,该协议能自动配置主机的IP地址.子网掩码.网关及DNS服务器等TCP/IP信息.DHCP可以降低客户机IP地址配置的复杂度和网络管理成本. DHCP ...

  2. [系统开发] Squid 认证系统

    一.用途 用过 Squid 的用户认证模块的同事一定知道,它有个很麻烦的问题:每过一段时间就会跳出一个重新输入密码的窗口,用户不胜其烦,我查了网上的各种配置资料,始终没有找到一个圆满的解决方法,所以编 ...

  3. svn: E200030: sqlite[S10]: disk I/O error

    1. 经遇到的问题,它出现(在我的情况下,至少)要与TortoiseSVN的相互作用.禁用TortoiseSVN的图标缓存(设置>图标重载>缓存“无”>申请)拥有的一切工作就好了 ( ...

  4. ubuntu eclipse下配置C++ 环境

    首先你通过以下3个命令确定已安装好eclipse cdt sudo apt-get install eclipse sudo apt-get install eclipse-pde sudo apt- ...

  5. bug_ _图片_android.view.InflateException: Binary XML file line #1: Error inflating class <unknown>

    =========== 1   java.lang.RuntimeException: Unable to start activity ComponentInfo{com.zgan.communit ...

  6. viewpage广告条的制作

    package com.itheima27.viewpagerdemo; import java.util.ArrayList; import java.util.List; import andro ...

  7. Beautiful Soup第三方爬虫插件

    什么是BeautifulSoup? Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简单又常用的 ...

  8. 按钮/文本框 disabled

    需求:已登入的,将用户的信息回填,用户文本框内容不能更改. 按钮: <button type="button" id="btnSearch">< ...

  9. map遍历测试结果

    结论:一般情况下推荐使用enterSet的for循环(即以下的方法2),如果只是取key值可以使用keySet性能会更好. 因为keySet只取key,enterSet即取了key又取了value. ...

  10. 从0到1搭建移动App功能自动化测试平台(0):背景介绍和平台规划

    本文作者: 伯乐在线 - debugtalk .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 转载地址:http://blog.jobbole.com/101221/ 背景 最近新加入DJI的 ...