问题标签 [anchor-scroll]

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 投票
1 回答
117 浏览

html - $anchorScroll 效果与鼠标滚动而不是点击角度

我一直在寻找,但到目前为止我找不到答案/解决方案,所以我希望这里的人能够回答我并在可能的情况下指导我找到解决方案。

我正在尝试实现此页面的第二个示例中看到的结果:https://docs.angularjs.org/api/ng/service/ $anchorScroll ,但我需要能够使用而不是单击链接鼠标滚动以在锚之间导航,即,如果我向下滚动,我会向下移动一个锚,如果我向上滚动,我会向上移动一个锚。

如何做到这一点?

提前致谢!

0 投票
2 回答
9135 浏览

javascript - 带有偏移量的平滑滚动锚点(jquery)

我使用以下代码在我的网站上为锚点添加平滑滚动。因为我有一个粘性标题 id 想用 200px 来抵消这个

0 投票
1 回答
61 浏览

javascript - 不滚动到顶部的锚点

我有一张带有浮动头的桌子。在我的表格中,我有多个单元格,这些单元格td带有指向该表格中其他单元格的锚点。

我的问题是当用户单击锚点时,锚点将他带到锚点,但他看不到元素,因为该元素位于浮动头部下方。

我怎样才能拥有一个将用户带到anchor + 100px顶部的锚点,让他看到目标元素?

0 投票
0 回答
1383 浏览

jquery - jquery+adobe muse 问题 - 如何解决代码问题:动态按钮导航上一个/下一个锚点?

我正在制作一个网络漫画,它启用了键盘从面板到面板的导航,使用锚点和基于跳转/滚动代码的小部件来增强 Adob​​e Muse。

我想通过放置在顶层框架中的一组动态按钮为移动用户提供导航选项,这些按钮以与向上箭头和向下箭头的按键类似的方式触发操作(当前功能但有问题)。

我希望观众可以链接到给定章节中的任何锚点,并从锚点向前或向后导航(上一页到最后一个锚点或下一页到下一个锚点),因此代码不依赖是关键在特定的起点上,特别是因为滚动跳转到锚代码不会在移动平台上触发。

这是一个示例章节的链接:

http://www.attilathe.com/chapter-5.html

由于 JSFiddle 不复制内容的顶级框架组合或小部件插件行为,我不确定如何复制代码。

我还看到了这个未回答的 stackoverflow 问题: 如何在不知道锚名称的情况下使链接转到页面上的下一个锚?

  • 我觉得它是相关的,但我需要一些帮助来翻译如何有效地将代码添加到 Adob​​e Muse,以便代码相对于内容正确放置并考虑到主框架。

非常感谢您的洞察力!

根据请求编辑添加 -

下面是代码的一部分,我不得不删除大量的代码以适应这里的限制,所以我可能无意中破坏了它,所以请查看链接源代码。示例章节没有放置按钮,因为它们不起作用,但包括已经完成主框架层中其他功能的按钮,这些按钮将被放置:

0 投票
1 回答
315 浏览

angularjs - Angular $anchorScroll ID 保留在 url 中,刷新后不起作用

$anchorScroll按照官方文档的示例gotoBottom,我对 angular有疑问。单击后goToBottm$anchorScroll将添加到url位置ID的 - mysite.com/tag/##ID,在第一次加载时它工作正常,但是当refershing页面ID停留在末尾时url,滚动不起作用。有想法该怎么解决这个吗?我的代码: HTML:

和身份证:

gotoBottom 在我的controller

0 投票
1 回答
293 浏览

angularjs - 角度控制器不适用于锚滚动

我正在尝试做一个简单的 $anchorScroll 但我的控制器不工作。

这是我的模块

这是我的控制器

我正在正确添加 ng-app 和 ng-controller。

有任何想法吗?

这是 plunkr:https ://plnkr.co/edit/Rnsahf24ds1pYWKz9Ete?p=preview

0 投票
2 回答
2741 浏览

cordova - Ionic 2 中的 $anchorScroll?滚动到具有 ID 的元素

从 Angular 1.x 开始,有什么方法可以在 ionic 2/Angular2 中执行 $anchorScroll 吗?

试图滚动到页面上的元素。我尝试了类似 ng2-page-scroll https://github.com/Nolanus/ng2-page-scroll

不确定我是否做得对,我按照教程进行操作并得到错误:

我认为这不再适用于最新的 ionic 2 版本。只希望有一种更简单的方法,有什么解决方法吗?

0 投票
1 回答
467 浏览

jquery - Wordpress / jQuery:当div在滚动视口中时突出显示匹配的锚点

我目前正在尝试为具有以下标准的 Wordpress 网站实施菜单:

  1. 当用户向下滚动页面并到达锚定的 div(链接在菜单中)时,菜单中的链接应该获得类 "active"
  2. 当用户点击一个锚点时,页面应该滚动到锚定的 div,并且链接应该接收“活动”类。

这是该页面的 HTML:

以下代码几乎可以工作 - 但是,它会引发以下错误:

Uncaught Error: Syntax error, unrecognized expression: http://domain.com/not-the-current-page

逻辑如下:

  1. 听滚动并相应地添加“活动”类。
  2. 单击链接时,停止 (1.),滚动到锚点,添加类“活动”,然后恢复 (1.)

这是我第一次使用 jQuery。我希望你们中的一个人可以为我指出正确的方向,以了解如何使其正常工作。非常感谢您的帮助!

0 投票
0 回答
323 浏览

jquery - 如何在 ionic 和 Angular 服务中使用 $location.hash() 为滚动设置动画?

我在一个页面上有一个过滤项目列表,该列表链接到另一个页面中的完整项目列表,我想导航到该页面并滚动到我在过滤列表中选择的项目。

我尝试使用 2 种不同的方法——$anchorScroll它们有效但没有动画属性。因此,下一个视图只会出现“预滚动”项,然后“弹性到该位置”。然后我尝试实现这样的服务:

这不起作用,因为出于某种原因我需要调用它两次并且也没有动画。

控制器调用:

URL 构造如下: <baseURL>/<ItemPage>#<ItemID>其中<ItemID>是项目在完整列表中的 id。

$location.hash()获得正确的“id” - 实际上,我如何为类似于此站点的滚动设置动画,并最终在滚动后执行类似的 CSS 突出显示?没有新的滚动到位置是粘性的。

感谢您的时间。

0 投票
1 回答
479 浏览

html - anchorScroll 不在控制器中使用 ng-repeat 执行?

我想我已经确定了一些关于 ng-repeat 运行时间的奇怪 AngularJS1 行为,因此与控制器执行的时间冲突。

我的控制器自动向下滚动到一个 html 锚 ID: $anchorScroll('html_id');

这适用于静态 html ( static html plunker )

但是如果控制器在 ng-repeat ( ng-repeat plunker )生成的 div 上调用它,则 anchorScroll 似乎不起作用

注意:: ng-repeat 上的 anchorScroll 可以通过按钮正常工作,但我希望它在加载时自动滚动...

(我也尝试过使用 ng-init= 来调用滚动函数,但同样的时间问题 - 所以它无法找到锚点......即使在 ng-repeat 之后编码)

任何想法/解决方法?

(似乎没有任何 ng-repeat 事件可以绑定...)