jquery 实现 返回顶部
//Html代码:
<div class="backToTop" title="返回顶部">返回顶部</div>
//代码
//CSS代码:
.backToTop { display: none; width: 18px; line-height: 1.2;
padding: 5px ;
background-color: #;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .;
filter: Alpha(opacity=);
}
//JS代码:
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: }, );
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > )? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - );
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();
jquery 实现 返回顶部的更多相关文章
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 转载:jQuery实现返回顶部功能
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
- jquery右下角返回顶部
实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先 ...
- 简单的JQuery top返回顶部
一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...
- jQuery实现返回顶部功能
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...
- 使用jquery实现返回顶部按钮
实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...
- 使用jQuery实现返回顶部功能
<p id="back-to-top"><a href="#top"><span></span>返回顶部< ...
随机推荐
- JAVA基础知识之Annotation
基本Annotation Annotation必须使用工具(APT, Annotation tool)才能处理,Annotation可以在编译,类加载,运行时被读取,并执行相应处理. 下面介绍一些常用 ...
- 安装AdventureWorks2008R2
在微软的网站,有介绍安装示例数据库AdventureWorks的说明. 你可以在这里下载到压缩包 (AdventureWorks2008R2_Database.zip),解压后会得到两个文件: Adv ...
- WebForm Application Viewstate 以及分页(功能性的知识点)
Application: 全局公共变量组 存放位置:服务器 特点:所有访问用户都是访问同一个变量,但只要服务器不停机,变量一直存在于服务器的内存中,不要使用循环大量的创建Application对象,可 ...
- jquery.Huploadify 上传
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- struts2漏洞集合
[+]1 S2-005 CVE-2010-1870 CVE-2010-1870 影响版本:Struts 2.0.0 – Struts 2.1.8.1 官方公告:http://struts.apache ...
- 简单播放器(增加sdl事件控制)
#include <libavcodec/avcodec.h> #include <libavformat/avformat.h> #include <libswscal ...
- Openstack+Kubernetes+Docker微服务实践之路--Docker和Registry2
渐入佳境,我们开始比较具体的工作,由于Docker是一个基础组件,所以本文的主题是Docker和Registry2. 底层系统基于Centos7,先在一台云主机上安装Docker,Docker的安装非 ...
- 程序设计入门——C语言 第8周编程练习 1 单词长度(4分)
第8周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统 ...
- 转:eclipse打开文件或者目录位置(不使用插件)
http://my.oschina.net/havoc/blog/204958?p= 首先说不使用插件的方法 WINDOWS eclipse配置 Run-->External Tools--&g ...
- 在web.xml注册applicationContext.xml配置文件
概要: Spring配置文件是集成了Spring框架的项目的核心,引擎的开始是:容器先是加载web.xml,接着是applicationContext.xml在web.xml里的注册.以下我们将介绍a ...