jquery方法回到顶部代码
<style>
/*默认样式,主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
</style>
<script>
function gotoTop(min_height){
//预定义返回顶部的html代码,它的css样式默认为不显示
var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
//将返回顶部的html代码插入页面上id为page的元素的末尾
$(".clearer").append(gotoTop_html);
$("#gotoTop").click(//定义返回顶部点击向上滚动的动画
function(){$('html,body').animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");
});
//获取页面的最小高度,无传入值则默认为600像素
min_height ? min_height = min_height : min_height = 600;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
$(document).ready(function(){
gotoTop();
}); </script>
其中
$(".clearer")
为页面的中的一个元素
jquery方法回到顶部代码的更多相关文章
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 兼容IE,chrome 等所有浏览器 回到顶部代码
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...
- 用Jquery写返回顶部代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...
- jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery之回到顶部
实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...
- 使用 jQuery 页面回到顶部
function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#t ...
随机推荐
- ASP.NET 数据库页面访问简单工具
在工作中,有很多项目已上线后,很多项目的数据库服务器都不会对外开放的,外网想直接访问客户数据库服务器时,可能会出现困难. 这时就需要一个可以查询,更新数据库操作的页面了: 本来用sql语句直接操作数据 ...
- STL源码分析-AVL树-RB树
AVL树 不平衡情况 插入节点位于左子节点的左子树(左左) 插入节点位于左子节点的右子树(左右) 插入节点位于右子节点的左子树(右左) 插入节点位于右子节点的右子树(右右) 左左.右右为外侧插入,左右 ...
- iptable软路由
http://xstarcd.github.io/wiki/Linux/iptables_forward_internetshare.html # 默认丢弃转发,所有内网流量不能访问外网卡 iptab ...
- SPSS时间序列:频谱分析
一.频谱分析(分析-预测-频谱分析) “频谱图”过程用于标识时间序列中的周期行为.它不需要分析一个时间点与下一个时间点之间的变异,只要按不同频率的周期性成分分析整体序列的变异.平滑序列在低频率具有更强 ...
- UnityVS 2013的使用
如果已安装旧版,先卸载,然后在安装新版本: 安装完毕后,打开Unity,在Build Settings中设置: Import the Visual Studio Tools Unity package ...
- 深入理解JavaScript系列(转自汤姆大叔)
深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...
- 在vs2005中使用SVN进行版本管理
1.软件准备 VisualSVN-Server-2.5.10.msi SVN服务端 WindowsXP-KB942288-v3-x86.exe XP中安装TortoiseSVNSVN1.8必须 Tor ...
- 三、第一个Struts2应用案例(编码步骤)
第一个Struts2应用案例(编码步骤) 编写2个jsp hello.jsp <body> <a href="${pageContext.request.conte ...
- 基于s5pv210嵌入式linux使用其他动态、静态库文件程序的交叉编译
刚刚移植了sqlite3迫切想测试一些,结果将原来在ubuntu系统下写好且测试通过的程序,重新编译就报错,无法找到已定义的函数 这是由于没有使用库或者使用了错误的就.库造成的结果. 正确做法为: a ...
- DPDK内存管理-----(二)rte_mempool内存管理
DPDK以两种方式对外提供内存管理方法,一个是rte_mempool,主要用于网卡数据包的收发:一个是rte_malloc,主要为应用程序提供内存使用接口.本文讨论rte_mempool.rte_me ...