当前位置: 首页 > 编程笔记 >

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

程淮晨
2023-03-14
本文向大家介绍返回顶部按钮响应滚动且动态显示与隐藏,包括了返回顶部按钮响应滚动且动态显示与隐藏的使用技巧和注意事项,需要的朋友参考一下

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

<!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>
 类似资料:
  • 本文向大家介绍jquery左边浮动到一定位置时显示返回顶部按钮,包括了jquery左边浮动到一定位置时显示返回顶部按钮的使用技巧和注意事项,需要的朋友参考一下

  • 我试图从活动中隐藏/显示片段中的按钮,但它给了我以下异常。 android.view.ViewRootImpl$CalledFromWrongThreadException:只有创建视图层次结构的原始线程才能触摸其视图。 家庭活动 类别片段 代码太大,无法在此处发布。这就是为什么我只在发现问题的地方发布代码。 我能够获得新设计按钮实例。令我震惊的是,如果尝试玩按钮实例(可见/消失),它会给我上述异

  • 本文向大家介绍基于jquery实现页面滚动时顶部导航显示隐藏,包括了基于jquery实现页面滚动时顶部导航显示隐藏的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 构建html,margint这个div中为了出现滚动条而建,并无实际作用。 写入CSS top

  • 本文向大家介绍javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,包括了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果。分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码。 运行效果如下图所示: 完整实例

  • 我正在寻找一种滚动以在顶部显示选定项的方法。 RecycerView不支持滚动到绝对位置 如何滚动以将选定项放在视图的顶部?

  • 问题内容: 我正在尝试实现无穷尽的滚动列表视图,但是当我调用整个列表时,滚动位置将回到顶部。 这是正常现象吗?如何使它简单地添加添加的项目而不刷新并保持滚动位置? 问题答案: 这种行为是不正常的。我看不到您的代码,我建议您执行以下操作: 1)您不是从UI线程调用。正确的方法: 2)您是否偶然拨打了电话 3)在您的适配器中,您重写了方法并添加了说明以转到顶部 4)如果您使用列表来填充适配器- 每次都