问题标签 [anchor-scroll]

我决定使用单页应用程序模型 - 使用单独的controllers.js，services.js并且app.js为了创建一个网站，该网站实际上会将视图堆叠在一起，而不是在视图更改时更新视图。

我基本上是在尝试使用 ui-view 指令，因为我想把知识放在一个基本的例子中。

我遇到的问题如下：我有一个header.html，其中一个锚<a></a>链接指向div另一个.html文件中的 a 。我无法让滚动工作，但 stackoverflow 上的某个人已经展示了使用$location.hash('');and的解决方法$anchorScroll。

就我而言，这有两个缺点：

1. 我想要一个从锚点到div. 我四处阅读，发现这不能用$anchorScroll. 我想知道 - 可以ScrollMagic以提供滚动功能的方式实现。
2. 使用该$anchorScroll方法，当滚动回到页面顶部，并点击同一个锚点时，它不起作用。

这是我在 SO 上的第一篇文章，因此欢迎任何有关如何以有序方式向您展示代码的帮助。

我有一个导航栏，它在向上滚动 160 像素后固定在屏幕顶部。我还对锚链接使用平滑滚动，如果导航栏已经固定到屏幕顶部，效果很好，但是如果导航栏在向上滚动 160px 之前处于未固定状态，则锚滚动不会考虑记下我添加的 40px 缓冲区。

无论导航栏是否固定，我都希望平滑滚动准确地滚动到锚点 -40px。

我正在使用的两批代码如下：

1) 平滑滚动

2) 固定导航栏

有任何想法吗？

提前致谢。

我有一个名为 state.home() 的状态，用于将用户重定向到主页，这是我的状态：

在完成一些工作后的另一个页面中，在我的控制器中，我需要将用户重定向到主页中的特定 Div，所以在我的控制器中，我添加了这一行进行重定向，但它似乎不是正确的方法：

我想知道它是否可以在相同的状态下工作，或者我必须创建一个新的状态。

上下文：我有一个左侧菜单（导航器）和右侧面板（内容）div。导航器中的每个项目都链接到右侧面板中其部分的 ID。

问题：单击导航面板中的菜单项时，我试图将右侧面板滚动到相应的部分。

我用anchorScroll()和locator.hash()函数来做。它可以工作，但它会滚动整个页面（导航和内容）。

我创建了两个控制器：一个用于父级（包括导航器），另一个用于容器（我要滚动的那个）。当我从菜单中单击项目时，我正在更改范围内的变量。

然后，从子范围内，我正在观察该变量，执行滚动

html:

js：

范围父：

范围子项：

问题是整个页面都滚动了。

任何想法 ？

谢谢！

非常感谢您对此的任何帮助。我正在尝试在 wordpress 中为客户修复这些锚链接，但突然之间，锚链接刚刚停止工作。没有任何修改，没有添加其他插件，只是由于某种原因不再响应。它的 wordpress 4.4.2 并且他们也在使用构建器插件。这是现场网站的网址：http ://www.franchiseinnovationgroup.com

奇怪的是#top 和#footer 锚点有效，但#about、#portfolio、#testimonials 和#contact 锚点不起作用。

任何帮助将不胜感激！

谢谢，

布拉德

我遇到了问题anchorScroll，我用 ng-repeat 运行了一个列表，因为 id 有一个时间戳日期，当我确定我想要滚动到它的 id 时，它正确地带走了我，但由于某种原因滚动我的视线消失了。

在我的应用程序中，我有 4 个具有不同IDs 的链接和 4 个与每个链接DIV相同的链接（我将它们用于锚点跳跃）。ID

我当前的代码：

有时用户id="2"在点击按钮之前只是先滚动到第二个 div ，当他们这样做时，他们会被发送到 top id="1"first 而不是 continue to next ID id="3"。

使用 时一次只能看到一个按钮，CSS单击链接时，我会删除该链接。

CSS

jQuery

如果用户向下滚动，我怎么能做到这一点，每个与删除相同ID的链接。DIV

例如： 如果用户向下滚动到<div class="col-md-12" id="1">，<a href="#" id="1" class="btn">One</a>将被删除，下一个链接将被<a href="#" id="2" class="btn">Two</a>点击。

PS：这是一个动态页面，IDs会改变，所以我们可能需要另一个选择器

这是我到目前为止所尝试的，但问题是它删除了所有链接，而不仅仅是第一个链接

PS： &的设置方式不需要喜欢这样，我可以将其更改为对功能更好的任何内容HTMLCSS

注意：我还没有解决这个问题。这篇文章似乎描述了我的问题的解决方案，因为我正在使用ngRoute并且正在使用更新版本的 Angular，但我无法让她的解决方案工作：https ://stackoverflow.com/a/35028895/6647188

在我的单页应用程序上：https
://kylevassella.github.io/ 我正在尝试将我的导航按钮链接到不同视图上的哈希链接。我一直在这里使用公认的答案寻求帮助：如何在 AngularJS 中处理锚散列链接

但我$anchorScroll在我的网站上实施 ( ) 时遇到了麻烦。

看看我在说什么：

1. 我的 Plunker：https ://plnkr.co/edit/fgTG7j?p=info 使预览窗口足够宽，以便导航菜单（“家庭投资组合联系人”）出现在顶部。
   

2. 向下滚动到“项目”，单击“项目 1”。这将打开一个新视图并 ng-show启用不同的导航栏（看起来与旧的相同。在下面<section ng-show="showPortfolioHeader">查看 index.html这些导航锚）。
   

3. 从这里我希望“投资组合”和“联系方式”链接到我views/home.html认为的#portfolio 和#contact 哈希链接 ID。但他们只带我到正确的路线 ( views/home.html)，而不是他们各自在页面上的滚动点。
   注意：在 Plunker 上，这些甚至没有链接到正确的路线，它们将我带到 404。这不是问题- 在我的本地机器上，这部分工作正常。我的问题是，一旦我进入views/home.html视图，浏览器就不会滚动到哈希链接。
   

如果我在 *ngFor 上生成了多个元素的页面上向下滚动，单击一个元素会通过路由器将我带到另一个页面。当我单击一个按钮返回上一页时，我希望屏幕向下滚动到我离开页面之前的位置。

我怎样才能做到这一点？

我在使用 $anchorScroll 时遇到了问题。我有一个在开始时不可见的 ng-ig 条件的 div。单击按钮时，我需要使用 $anchorScroll 函数进入该 div。这个按钮也使 div 可见。现在不起作用，因为我认为它会在创建 div 之前触发 $anchorScroll 。这是代码：

和角部分

Plunker：http ://plnkr.co/edit/HrdN2ZACDui61l1kPHEj?p=preview

谢谢