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


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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
php分页代码学习示例分享
2014/02/20 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python 读取DICOM头文件的实例
2018/05/07 Python
python实现手机销售管理系统
2019/03/19 Python
python常用函数与用法示例
2019/07/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python3访问字典里的值实例方法
2020/11/18 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
求职简历自荐信
2013/10/20 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
社区科普工作方案
2014/06/03 职场文书
员工工作及收入证明
2014/10/28 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
基于python制作简易版学生信息管理系统
2021/04/20 Python
Python入门学习之类的相关知识总结
2021/05/25 Python