//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 实现 返回顶部的更多相关文章

  1. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

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

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

  3. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  4. javascript+JQuery实现返回顶部功能

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

  5. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  6. jquery右下角返回顶部

    实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先 ...

  7. 简单的JQuery top返回顶部

    一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...

  8. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  9. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  10. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

随机推荐

  1. centos常用操作

    文件夹赋权chmod -R 777 文件夹 zip压缩和unzip解压缩命令详解以下命令均在/home目录下操作cd /home #进入/home目录1.把/home目录下面的mydata目录压缩为m ...

  2. SAML 2.0 setup steps, 效果图

    Steps of setting up SAML SSO. 效果图 # Registry a Identity Provider services in:(Might need purchase) I ...

  3. [poj2411] Mondriaan's Dream (状压DP)

    状压DP Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One nigh ...

  4. How To Install Java on CentOS and Fedora

    PostedDecember 4, 2014 453.8kviews JAVA CENTOS FEDORA   Introduction This tutorial will show you how ...

  5. word域1

    Description: 域是WORD中的一种特殊命令,它由花括号.域名(域代码)及选项开关构成.域代码类似于公式,域选项并关是特殊指令,在域中可触发特定的操作.在用WORD处理文档时若能巧妙应用域, ...

  6. Web String path问题

    request.getContextPath()"下方出现了红色的波浪线,提示的错误信息是 "The method getContextPath() from the type H ...

  7. Python之操作Redis、 RabbitMQ、SQLAlchemy、paramiko、mysql

    一.Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.Redis是一个key-value存储系统.和 ...

  8. CentOS 7 程序自启动的问题

    Mysql具体的安装方法见http://www.cnblogs.com/yoyotl/p/5752437.html 但是关于自启动部分需要多一些说明. 一.问题现象: 系统重启后,发现mysqld服务 ...

  9. 更改SQL Server 数据库的排序规则

    更改数据库的排序规则,SQL提示 5030 的错误,错误信息如下: The database could not be exclusively locked to perform the operat ...

  10. js设计模式总结-单例模式

    单例模式 解决的问题 保证实例只有一个,避免多个实现,从全局来看,这个实例的状态是唯一的. 实现原理 设置一个变量来记录实例,通过检测该变量是否为空来决定是否创建实例 非透明单例 所谓非透明就是用户在 ...