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>返回顶部< ...
随机推荐
- Eclipse+maven+scala2.11.8+spark2.0.0的环境部署
主要在maven-for-scalaIDE纠结了,因为在eclipse版本是luna4.x 里面有自己带有的maven. 根据网上面无脑的下一步下一步,出现了错误,在此讲解各个插件的用途,以此新人看见 ...
- centos6.x开机卡死
问题描述: centos6.x开机卡死在进度条处 远程登录,查看系统日志,看看卡在哪儿 通过远程连接,tail -fn 20 /var/log/messages 发现报错: init: prefdm ...
- ISPA
来自CSDN的Rachel Zhang 4. Improved SAP 算法 本次介绍的重头戏.通常的 SAP 类算法在寻找增广路时总要先进行 BFS,BFS 的最坏情况下复杂度为 O(E),这样使得 ...
- JAVA中取余(%)规则和介绍
在java中%的含义为取余. java :a%b 数学公式a%b=a-(a/b)*b
- eclipse上修改js后,浏览器上还是出现原来效果的解决方法
废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.
- 求System.arraycopy的用法
public class Shuzufuzhi { public static void main(String args[]) { int myArray[]={1,2,3,4,5,6}; in ...
- shell,bash,git bash,xshell,ssh
一:shell是linux/unix系统的外壳,也可以理解为命令行接口,就是你输入并执行命令行的地方.bash(born again shell)是shell的一种,最常用的shell之一.你在你的l ...
- CAS单点登录和spring securtiy集成
说明:本文章主要建立在spring-security早已集成在系统中的前提下: 1.需要创建一个spring-security.xml文件并关联在applicationContext.xml文件中:& ...
- 如何让老Mac机支持USB安装Windows
一些老Mac机的用户想装Windows,却发现自己的系统上的Boot Camp Assistant(以下简称BCA)没有USB安装Windows的选项. 下面以我的MacBook Pro (13-in ...
- 一篇讲Java指令重排和内存可见性的好文
在这里: http://tech.meituan.com/java-memory-reordering.html 指令重排和内存可见性(缓存不一致)是两个不同的问题. volatile关键字太强,即阻 ...