脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 返回顶部

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

 更新时间：2014年10月14日 17:08:32   投稿：whsnow  
返回顶部功能在很多的网站上都有，判断滚动参数动态显示与隐藏，下面的示例很实用，喜欢的朋友可以收藏下

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

<!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>
您可能感兴趣的文章:

相关文章

  • JS 实现随机验证码功能

    JS 实现随机验证码功能

    验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下
    2017-02-02
  • ES6中定义类和对象的方法示例

    ES6中定义类和对象的方法示例

    这篇文章主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • iconfont的N种使用方法小结

    iconfont的N种使用方法小结

    使用iconfont字体图标可以随意改变大小,避免图片放大失真问题,但是值得注意,修改字体图标大小的时候使用font-size属性,并且颜色可随意更改,本文给大家介绍iconfont的N种使用方法,感兴趣的朋友一起看看吧
    2024-01-01
  • javascript跨域刷新实现代码

    javascript跨域刷新实现代码

    在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方
    2011-01-01
  • ie8本地图片上传预览示例代码

    ie8本地图片上传预览示例代码

    ie8本地图片上传预览出现问题是因为限制浏览器造访本地文件，所以用到滤镜和div，下面有个不错的示例，希望对大家有所帮助
    2014-01-01
  • 浅谈JS之tagNaem和nodeName

    浅谈JS之tagNaem和nodeName

    下面小编就为大家带来一篇浅谈JS之tagNaem和nodeName。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 基本DOM节点操作

    基本DOM节点操作

    本文主要介绍了基本DOM节点操作，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS函数式编程之纯函数、柯里化以及组合函数

    JS函数式编程之纯函数、柯里化以及组合函数

    这篇文章主要介绍了JS函数式编程之纯函数、柯里化以及组合函数，文章对三个函数进行分析讲解，内容也很容易理解，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • 游览器中javascript的执行过程(图文)

    游览器中javascript的执行过程(图文)

    在讲这个问题之前，先来补充几个知识点，如果对此已经比较了解可以直接跳过
    2012-05-05
  • 15条JavaScript最佳实践小结

    15条JavaScript最佳实践小结

    如果你的JavaScript代码只是增加一些功能，那么尽管大胆地把文件引用放在HTML底部吧，你会看到明显的速度提升。本文总结了15条小建议，感兴趣的朋友可以参考下
    2013-08-08

最新评论