滚动“返回顶部”链接时显示/隐藏 div

2024-04-20

我无法让我的“转到顶部”id=arrow-updiv 在打开时消失,例如页面顶部。

在页面顶部我得到了

所以我想要arrow-up div to visible(show("slow"))当不在页面顶部时。

 var tmp = $(window).height();

Tmp用于获取视口高度...不确定这是否正确?

我见过其他解决方案,但它们只是有点相同......而且我无法让它们工作,而且它们也使用字体:in-viewport。我可以用视口来实现它还是我已经偏离轨道了?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">        </script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="/jquery/isInViewport.min.js"></script>



$(window).scroll(function() {
  if($('#pageStart:in-viewport(tmp)')){
    $("#arrow-up").hide("slow");
  }else{
    $("#arrow-up").show("slow");
  }
});

“所以我希望向上箭头 div 在未打开时可见(show(“slow”)) 页面顶部”

我这样做:

http://jsfiddle.net/wf_4/GubeC/ http://jsfiddle.net/wf_4/GubeC/

SCRIPT:

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('.back-top').fadeIn();
        } else {
            $('.back-top').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('.back-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1600);
        return false;
    });
});

CSS

.back-top {
    width:25px;
    height:25px;
    background:#ff0000;
    position:fixed;
    bottom:68px;
    right:5px;
    display:none;
    opacity:0.8;
}

HTML

<div class="back-top" title="Top of Page"></div>       
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动“返回顶部”链接时显示/隐藏 div 的相关文章

  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • Javascript 假值(null、未定义、false、空字符串:“”或 '' 和 0)和比较(==)运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • Chrome//kendoUI/jQuery:超出最大调用堆栈大小

    我正在使用 hottowell 模板来创建 spa 应用程序 并且我从 jquery 中收到了一个很好的错误 基本上我的问题从此刻开始尝试绑定我的视图 viewModelBinder js 来自 durandal 库 viewModelBi
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • Android 如何在 PreferenceScreen 中的长时间操作期间禁用复选框

    我从 xml 加载了这个 PreferenceScreen 问题是 当我切换复选框时 我会启动一个服务 需要 5 10 秒才能连接到服务器 我怎样才能在这段时间禁用该复选框 由于布局膨胀 我看不到如何获取 checkbox setEnabl
  • C 中的十六进制到字符数组

    Given a string of hex values i e e g 0011223344 so that s 0x00 0x11 etc 如何将这些值添加到 char 数组 相当于说 char array 4 0x00 0x11 您无
  • iOS:接到电话时显示提醒?

    我希望在接到电话时触发本地通知 并显示警报 这可能吗 通话事件可以启动应用程序或触发通知吗 Skype 是如何被解雇的 有推送通知吗 Thanks 当各种事件发生时 您的应用程序委托将接收对各种 UIApplicationDelegate
  • 如何更改故事板上视图控制器的大小以进行编辑?

    我有一个简单的问题 我花了无数的时间试图解决这个问题 如何更改 Xcode Storyboard 中视图控制器的大小以进行编辑 我有一个大的表格 调查问卷 我想放在我的视图控制器上 但我根本无法使用情节提要给我的当前大小 此外 提供的尺寸
  • Shutil.move IOError:[Errno 2] - 当处于循环中时[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如果我单独
  • 配置 sbt 项目以在“sbt run”中包含外部 Main 方法

    创建一个依赖于外部 jar 的 sbt 项目对我来说很常见 并且旨在使用外部 jar 中的 Main 方法运行 目前 我只是使用 run main xxx 运行它 但我更希望能够将 Main 方法包含在 sbt 提供的 run 选项列表中
  • Django Forms 视图中的自定义错误消息

    这是我的观点 if request method POST form TeacherRegister request POST Gets school object from email domain email form email va
  • TinyMCE - 外部工具栏位置

    我正在尝试与 TinyMCE 合作创建一个多文本框 点击编辑类型的图形内容编辑器 我已经使用 TinyMCE 来添加和删除它们 定位它们并调整它们的大小 单击以编辑它们等等 但有一件事困扰着我 那就是工具栏 我有一个外部工具栏 我试图将其放
  • 检查元素是否在视图中,如果是,则添加类

    我想堆叠元素 当它们进入视图时 它会添加类 active 我不想删除该类 因此一旦添加它 它就会保留在那里 大概的概念 If default在滚动视图中添加类 active 因此 当您向下滚动时 它会在类进入视图时添加该类 在查看了类似的问
  • 模块化 AngularJS 应用程序:一个或多个 AngularJS 模块?

    我尝试使用 AngularJS 构建一个模块化应用程序 我的第一个想法是使用这种文件夹结构按功能对每个模块进行分组 core controllers js directives js app js modules users control
  • C++ 错误 C2040?

    错误信息 这是什么意思 我该如何解决它 错误 C2040 int 与 const char 2 的间接级别不同 Code include
  • 找不到方法 commandLine()

    我正在尝试将预构建 shell 脚本添加到我的 gradle Android Studio 构建中 我已添加以下内容app build gradle task prePreBuild lt lt commandLine ls preBuil
  • 根据列条件连接数据框行

    为了后续的讨论 我将参考下面的示例数据框 现在 我希望实现的是将所有相似的数据包时间分组 即所有 7s 12s 等 此外 PacketTime字段应包含最小值和最大值的差异 max PacketTime min PacketTime 以及F
  • Fortran90 数组将空白值读取为 null

    我正在读取外部文本文件的数据 30 行 7 列 每行用 分隔 我缺少表示为 的值 当我将数据读入二维数组时 缺失值被 0 00 替换 但数据中也有 0 00 值 当我计算平均值时 计数 项目数 n 显示为计数 缺失值的数量 我如何动态选择缺
  • 调试断言失败

    我不断遇到这种情况 Debug assertions failed 当我在调试模式下运行程序时出错 我尝试在 Visual C 网站上查找此错误 但这些解释对我来说太先进了 而且它们与我对问题的最佳猜测没有任何相似之处 我已经检查了我的代码
  • 使用 Java 查找句子中的确切单词

    我正在编写一个代码来识别文本中的国家 地区名称 我正在使用一本包含国家名称的字典India America Sri Lanka 我目前正在使用text contains key with key从字典中 然而 即使对于像这样的字符串 这也会
  • 在 C 语言中,stdout 缓冲区的大小是多少?

    今天我了解到 stdout 在设置为终端时是行缓冲的 并且在不同情况下是缓冲的 因此 在正常情况下 如果我使用 printf 而不终止 n 只有当缓冲区已满时 它才会打印在屏幕上 如何获得这个缓冲区的大小 它有多大 实际大小由各个实现定义
  • “SolidBrush”参数类型对于格式化属性“Foreground”无效。参数名称:值

    我尝试在调用方法中更改颜色文本 RichTextBox wpf 但我遇到了一些麻烦 我的麻烦是 SolidBrush 参数类型对于格式化属性 Foreground 无效 参数名称 值 My code MethodInvoker action
  • 如何从 2 个数组创建地图?

    我有一个字符串数组和一个整数数组 如何使用第一个作为键 第二个作为值来创建地图 val keys arrayOf butter milk apples val values arrayOf 5 10 42 val map Map
  • 滚动“返回顶部”链接时显示/隐藏 div

    我无法让我的 转到顶部 id arrow updiv 在打开时消失 例如页面顶部 在页面顶部我得到了 所以我想要arrow up div to visible show slow 当不在页面顶部时 var tmp window height