返回顶部按钮响应滚动且动态显示与隐藏


Posted in Javascript onOctober 14, 2014

很多的网站上都有返回顶部功能,判断滚动参数动态显示与隐藏,比较适合初学者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现动态的显示回到顶部与否</title>
<style>
/*返回顶部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
</style>
</head>

<body>
<a title="返回顶部" href="javascript:void(0)" class="back_top"></a>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
});
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
}, false);

</script>
</body>
</html>
Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 #Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 #Javascript
js解决select下拉选不中问题
Oct 14 #Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 #Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 #Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 #Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
js 单引号 传递方法
2009/06/22 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python中的闭包函数
2018/02/09 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python3实现mysql导出excel的方法
2019/07/31 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
开学典礼观后感
2015/06/15 职场文书