问题标签 [scrolltop]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2356 浏览

javascript - 关闭弹出窗口后将页面返回到原始 scrollTop 位置

我有一个按钮可以固定页面内容的位置,然后在表单从右侧滑入时将其向左推。

这工作正常,除了一件事。当用户稍微向下滚动页面并单击按钮时,它成功地固定了位置。但是,当他们关闭此表单时,页面不会返回到原始位置......它会将用户带回页面顶部。我在下面发布了 jquery,它可能有助于更好地解释问题。

这里还有一个 jsfiddle 示例...

http://jsfiddle.net/CMbBC/

0 投票
1 回答
131 浏览

jquery - 关于 ScrollTop 编码的 Jquery 问题

这些是我的代码,但当然不起作用。我如何通过“如果”提问来申请它..?

0 投票
2 回答
521 浏览

javascript - 加载图像 (JavaScript/DOM) 后,滚动调整在非 IE 浏览器中无法正常工作;带有innerHTML的计时问题

我遇到了一些令人沮丧的 javascript 计时问题。

仅供参考,该页面是一个 jsp 文件,附加到该页面的是一个单独的 js 文件和 jQuery CDN 文件。出于故障排除的目的,我删除了所有不必要的内容和代码,并将我需要的内容粘贴到单独的 jsp 和 js 文件中以解决此特定问题。

如果我可以在某个地方显示 html 和 js,那就太好了。但现在,我将描述它。该页面有两个按钮,一个用于加载图像,一个用于切换“缩放”功能(稍后会详细介绍)。用户单击一个按钮,该按钮使用 DOM 加载图像,特别是 innerHTML。该图像被水平和垂直滚动条包围。当用户打开“缩放”功能时,图像会在 onclick 事件中记录鼠标单击的位置。因此,启用此选项后,用户单击图像并再次使用 DOM 和 innerHTML 加载同一图像的更大版本。最后一步,也是最重要的一步,使用鼠标位置,滚动条将聚焦并居中于单击的点(使用 scrollLeft 和 scrollTop)。

这一切都在 IE 中完美运行。但是,在非 IE 浏览器(即 FireFox)中,滚动调整需要单击几下才能赶上 innerHTML。也就是说,当用户第一次“缩放”时,图像会加载但滚动条不会调整。它需要再连续两次单击才能像在 IE 中一样工作。我正在研究innerHTML,它在FireFox 中比在IE 中慢。

我怎样才能解决这个问题?有没有其他人尝试使用 JavaScript 在 FireFox 中加载图像并立即调整图像上的滚动位置?同样,它在 IE 中第一次和之后每次都有效。但是非 IE 浏览器有问题。

我试过使用innerHTML、replaceChild、appendChild,到目前为止我没有尝试过修复它。

谢谢你。

更新:我想看看这个问题是滚动条内的东西还是图像;因此,我用 < p > ... < p > 替换了图像,并通过用户启动的 onclick 事件将其编程为在加载 **first* 图像后立即滚动。有趣的是,它奏效了。然后我用图像替换了文本,它又被打破了。

因此,在使用 DOM(即 innerHTML)加载图像后,任何在非 IE 浏览器中以编程方式滚动的尝试都会中断。但是,如果您以编程方式再次滚动,它将正常运行。

Update2:我尝试使用方法在调用结束时以编程方式取消事件并立即再次调用该函数,但这并没有解决问题。

然后,我尝试使用 jquery 加载图像,这似乎有效。我从另外两篇 stackoverflow 文章中对其进行了改编:我可以通过 ajax 获取图像并加载到 div中吗,并且img onload 在 IE7 中无法正常工作(以规避缓存问题)。

这是我使用的代码:

我相信,关键是使用 onload 方法。我尝试在 onload 方法中使用 jQuery.html() ,但没有成功。因此,这证实了肯定存在与 innerHTML 以及图像如何以及何时加载到 DOM 相关的时间问题。onload 方法与 DOM 的本机 appendChild 方法或 jQuery 的等效 appendChild 实现相结合,解决了这个问题。

更新3:

关于下面mrtsherman的建议——

这是我的代码:

我创建了一个内部 div 来放置图像。创建上述 div 后,我根据图像的尺寸调整了它的大小。我调整了js中的滚动,然后通过innerHTML将图像附加到DOM,它没有滚动。我将宽度和高度更改为大于图像的某个固定大小,然后它滚动了。但这不是想要的效果,使容器比图像更大。感谢您的帮助。

Update4:当使用 document.createElement("img") 而不是 new Image() 时,我在Update2 中编写的代码等效于什么?onload 事件的影响与 Image 对象中的不同;onload 事件在这里是一个重要的组成部分。

谢谢你。

0 投票
1 回答
1600 浏览

javascript - Android WebView 上 JavaScript(使用 jQuery)“scrollTop”的奇怪行为

我有一个 HTML 文件,其中包含一个带有id="start_section". 我希望当页面加载时它会向下滚动到这个元素,所以我添加了以下脚本:

现在,它在第一次加载页面时工作得非常完美。

但是,一旦由于某种原因重新创建了 Activity,比如方向更改,就会发生一些奇怪的事情:页面被重新加载,然后不是向下滚动到特定元素,而是一直滚动到页面底部。

我试图禁用缓存,但没有帮助。

有任何想法吗?

0 投票
3 回答
15712 浏览

jquery - jquery scrollTop 在 IE8 中不起作用

我正在尝试根据 url 上的哈希滚动页面。这是我的代码:

这没什么。那么我做错了什么?还有一件事,我需要这样的东西:

这可能吗?..我的 div(指向元素哈希)是否会滚动到顶部,直到底部"#header"

更新 1

散列文本是一个 id,因此它从 .返回文本“#myid” window.location.hash。另一件事,标题的 divposition:fixed在它的 css 上有一个,而 div(哈希是 id'd 到)的容器有一个position:absolute,所以它在下面滚动,#header这就是为什么我需要它滚动到标题的底部或高度。

更新 2

我现在正在尝试使用scrollIntoView() 插件但出现错误。

我的代码是:$("#survey_section_8").scrollIntoView();

我在这里做错了什么?..

希望我的问题很清楚。谢谢!

0 投票
1 回答
425 浏览

jquery - 跨浏览器按键 - 滚动到顶部

不久前我发现这段代码与 html 元素一起使用

但是当按下 't' 键时如何触发呢?适用于所有主流浏览器?

0 投票
1 回答
871 浏览

jquery - 通过命名锚点导航长选项卡面板时,jQuery 选项卡会滚动到视图之外

看看这个小提琴:

http://jsfiddle.net/contendia/GBTAS/

这个想法是通过仅在 js 可以运行时创建选项卡来保持页面对非 js 用户友好。否则,我只想将页面显示为一堆 div。根据选项卡的数量,选项卡的列表是完全自动化的,并且每个选项卡都根据相应的 div id 属性命名。

一切都运行良好,但现在我正在尝试修改 click 事件以更普遍地导航选项卡。之前,我只是在其中一个列表项选项卡 (li) 上查找单击事件,然后运行必要的代码来更改选项卡。

但是现在我想让这个函数更通用,这样当用户点击哈希值等于其中一个选项卡 ID 的任何锚点时,它就可以工作,而不必定位实际的选项卡。我不确定如何在锚点中定位哈希并针对选项卡 ID 对其进行测试。我在 FF 和 IE 中提供的功能既可以用于单击选项卡,也可以用于单击锚链接(例如,<a href="#tab1">Tab 1</a>)。但是,如果选项卡比视口长,选项卡顶部会滚动到窗口顶部,导致选项卡链接消失。用户必须手动将选项卡链接滚动回视图以导航到另一个选项卡。我试过 .scrollTo() 将页面移回原位,但没有运气。

这只是 .scrollTo 的一个问题,还是我的点击功能都错了?

将不胜感激任何想法。奖金,如果它会动画会很棒。

http://jsfiddle.net/contendia/GBTAS/

0 投票
1 回答
652 浏览

jquery - jQuery scrollTop 动画作为 HTML 呈现

我已经运行了 JQuery,我想使用 scrollTop 动画将窗口移回顶部附近(大约 240 像素,虽然有些可变)作为 AJAX 调用的回调,它将替换上的大量 HTML 内容页。

我在用着:

我遇到的问题是,当这段代码运行时没有延迟或超时,窗口会做一个非常小的滚动动画到一个远不想要的位置。当我添加一些任意延迟(至少 1 到几秒)时,窗口可能会或可能不会在所需位置结束,但动画几乎不是动画(它更像是 2 个单独的 scrollTop 调用 - 它会很快向上跳,稍等片刻,然后再次向上跳到正确的位置)。

当我单独运行代码时(不是作为一堆 HTML 渲染中间的回调),动画似乎可以正常工作。

有任何想法吗?提前致谢。

0 投票
1 回答
1795 浏览

jquery - jQuery ScrollTop,使用输入标签时滚动是双倍的

我看到一个奇怪的问题,即ScrollTo 插件滚动两倍于预期距离,但只有当您单击单选按钮或复选框标签时。

我删除了插件并用这个替换它......

然而问题仍然存在。所以然后我尝试添加一个动画停止但没有运气......

然后我为这个问题创建了一个非常基本的 jsFiddle,我现在确信这是一个 jQuery Core 错误。在 jsFiddle 允许的情况下,在所有 jQuery 版本中进行了测试。到目前为止,在 Safari、Firefox 和 IE8 中都是一样的。

如果<label>单选按钮或复选框旁边有一个元素并将其id用作 中的for属性<label>,则单击<label>将选择其相应的单选按钮或复选框。(这应该像那样工作。)

这里的问题是 jQueryscrollTop()将计算的位置加倍,但当您单击<label>选择单选按钮或复选框的 a 时。当您单击其他任何内容(包括单选按钮或复选框本身)时,它会滚动适当的距离。

http://jsfiddle.net/sparky672/sZAkJ/

如您所见,单击链接到其输入元素的标签会导致双滚动。

其他一些观察:

在我的页面中,滚动似乎开始和停止了两次。这就是为什么我添加.stop(true, true)到我的动画。然而,这对阻止这个问题没有任何影响。

我无法避免使用标签来选择我的输入元素,因为我有另一个依赖于此的功能。(例如:http: //jsfiddle.net/sparky672/CgMX8/

我在找...

1)对此的解释。如果没有,也许它只是一个(新的?)jQuery Core 错误。搜索 Google 后,我找不到任何其他提及此怪癖的内容。 jQuery 错误跟踪器中也没有任何内容

2)一个解决方法,这样我就可以点击输入标签,而不是让滚动加倍。当单击容器内的任何内容(包括单选按钮和标签)时,我想实现滚动效果。我认为可以改进选择器,以便在单击标签时可以将滚动切成两半,但在单击其他任何内容时仍然可以正常工作。(这也可能效果不佳,因为它仍然看起来好像动画被触发了两次。)

0 投票
2 回答
1405 浏览

jquery - 如果页面向下滚动到类名,jQuery 会做一些事情

如果我去小于或等于页面上的一个类,我希望有一个 div 出现。

IE。一旦页面向下滚动到某个类,我希望这个框出现。通过在页面上向下滚动,我希望这个框仍然出现,直到我回到课堂之上。

目前,这并没有完全按照上面提到的方式进行,而是在我在其上方或下方滚动时隐藏。我需要以某种方式修改代码: