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. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. Func系列2:常用模块及API

    简介 Func提供了非常丰富的功能模块,包括CommandModule(执行命令).CopyFileModule(拷贝文件).CPUModule(CPU信息).DiskModule(磁盘信息).Fil ...

  3. Func系列1:安装配置

    简介 Func是由红帽子公司以Fedora平台构建的统一网络控制器,是为解决集群管理.监控问题而设计开发的系统管理框架.它是一个能有效简化多服务多服务器系统管理工作的工具,它易于学习.使用和扩展,功能 ...

  4. PHP之单例模式的实现

    单例模式: 单例模式又称职责模式:简单的说,一个对象(在学习设计模式之前,需要比较了解面向对象思想)只负责一个特定的任务: 单例类: 1.构造函数需要标记为private(访问控制:防止外部代码使用n ...

  5. C# STUDY

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. Spark on Yarn年度知识整理

    大数据体系结构: Spark简介 Spark是整个BDAS的核心组件,是一个大数据分布式编程框架,不仅实现了MapReduce的算子map 函数和reduce函数及计算模型,还提供更为丰富的算子,如f ...

  7. UVa 297 Quadtrees(树的递归)

    Quadtrees 四分树就是一颗一个结点只有4个儿子或者没有儿子的树 [题目链接]UVa 297 Quadtrees [题目类型]树的递归 &题意: 一个图片,像素是32*32,给你两个先序 ...

  8. mysqli 操作数据库

    从php5.0开始增加mysql(i)支持 , 新加的功能都以对象的形式添加 i表示改进的意思 功能多.效率高.稳定 编译时参数: ./configure --with-mysql=/usr/bin/ ...

  9. 打印1到最大的n位数

    打印1到最大的n位数----java实现 题目:输入数字n,按顺序打印出从1到最大的n位十进制数.比如,输入3,则打印出1,2,3,.....,一直到最大的3位数即999. 分析: 1.这是一个典型的 ...

  10. UML系列图--用例图

    UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言. 在UML系统开发中有三个主要的模型: 功能模型: 从用户的角度展示 ...