哈希链接与路由 - `$ anchorScroll`故障排除 [英] Hash linking with routing - `$anchorScroll` troubleshooting

问题描述

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

Note: I still haven't solved this. This post seems to describe a solution to my problem since I'm using ngRoute and am on a newer version of Angular, but I couldn't make her solution work: https://stackoverflow.com/a/35028895/6647188

在我的单页应用中： https://kylevassella.github.io/

我正在尝试将导航按钮链接到不同视图上的哈希链接。我一直在使用接受的答案寻求帮助：如何处理AngularJS中的锚点哈希链接

On my single page app: https://kylevassella.github.io/
I'm trying to link my nav buttons to hash links on a different view. I've been using the accepted answer here for help: How to handle anchor hash linking in AngularJS

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

But I'm having trouble implementing ($anchorScroll) on my site.

看看我在说什么：

To see what I'm talking about:

1. 我的Plunker： https://plnkr.co/edit/fgTG7j?p=info 使预览窗口足够宽，以便导航菜单
   （'Home Portfolio Contact'）显示在顶部。
   



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

1. My Plunker: https://plnkr.co/edit/fgTG7j?p=info Make the preview window wide enough so the nav menu ('Home Portfolio Contact') appears at the top.
   

2. Scroll down to ‘Projects’, click ‘Project 1’. This opens a new view & ng-show enables a different nav bar (which looks the same as the old. Look below <section ng-show="showPortfolioHeader"> in index.html for these nav anchors).
   

从这里我想要
'投资组合'& 联系链接到#portfolio& #contact
我的 views / home.html 视图中的哈希链接ID。但他们只花了我b $ b到正确的路线（ views / home.html ），而不是他们各自的页面上的
滚动点。
注意：在Plunker上，这些甚至没有链接到正确的路线，他们带我到404.这不是问题 - 在我的本地机器上这部分工作正常。我的问题是，一旦我到达 views / home.html 视图，浏览器就不会滚动到哈希链接。

From here I want ‘Portfolio’ & ‘Contact’ to link to the #portfolio & #contact hash link ID's in my views/home.html view. But they only take me to the correct route (views/home.html), not to their respective scroll points on the page.
NOTE: On Plunker, these don't even link to the correct route, they bring me to a 404. That's not the problem - on my local machine this part works fine. My problem is that once I get to the views/home.html view, the browser isn't scrolling to the hash link.

推荐答案

嗨我不知道你是否解决了但是这就是我所做的，它对我有用：）

Hi i dont know if you resolve it but this is what i did and it worked for me :)

<a ng-click="scrollTo($event, id)">dasdsa</>
<div id="id"></div>
/// ctrller
$scope.scrollTo = function(event, id){
   event.preventDefault();
   var old = $location.hash();
   $anchorScroll();
   $location.hash(old);
}

这篇关于哈希链接与路由 - `$ anchorScroll`故障排除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！