如何在 AngularJS 中处理锚散列链接答案

【问题标题】：How to handle anchor hash linking in AngularJS如何在 AngularJS 中处理锚散列链接
【发布时间】：2013-01-20 15:45:45
【问题描述】：

你们中有人知道如何在 AngularJS 中很好地处理锚散列链接吗？

我有一个简单的常见问题页面的以下标记

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

当单击上述任何链接时，AngularJS 会拦截并将我路由到一个完全不同的页面（在我的情况下，是 404 页面，因为没有与链接匹配的路由。）

我的第一个想法是创建一个匹配“/faq/:chapter”的路由，并在相应的控制器中检查匹配元素后的$routeParams.chapter，然后使用jQuery向下滚动到它。

但后来 AngularJS 又在我身上拉屎了，而且还是滚动到了页面的顶部。

那么，这里有人过去做过类似的事情并且知道一个好的解决方案吗？

编辑：切换到 html5Mode 应该可以解决我的问题，但无论如何我们都必须支持 IE8+，所以我担心这不是一个被接受的解决方案：/

【问题讨论】：

我认为 Angular 建议改用 ng-href=""。
我认为 ng-href 只有在 url 包含需要绑定到 ng-model 的动态数据时才适用。我有点想知道您是否将 hashPrefix 分配给 locationProvider，如果它会忽略链接到 ID：docs.angularjs.org/guide/dev_guide.services.$location
Adam 在 ng-href 用法上是正确的。
Anchor links in Angularjs?的可能重复
这也是新 Angular 的问题：stackoverflow.com/questions/36101756/…

标签： javascript angularjs anchor hashtag

【解决方案1】：

您正在寻找$anchorScroll()。

Here's the (crappy) documentation.

And here's the source.

基本上你只需注入它并在你的控制器中调用它，它就会将你滚动到任何具有$location.hash() 中的 id 的元素

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

Here is a plunker to demonstrate

编辑：将其与路由一起使用

像往常一样设置你的角度路由，然后添加以下代码。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

您的链接将如下所示：

<a href="#/test?scrollTo=foo">Test/Foo</a>

这是Plunker demonstrating scrolling with routing and $anchorScroll

甚至更简单：

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

您的链接将如下所示：

<a href="#/test#foo">Test/Foo</a>

【讨论】：

添加路由时可能会出现问题：如果添加 ngView，每次更改 url 的哈希都会触发路由重新加载...在您的示例中，没有路由并且 url 不反映当前项目...但是谢谢指向 $anchorScroll
@blesh，调用 location.hash(X) 会更改页面，因为路由控制视图。
这个解决方案会导致我的整个应用程序重新渲染。
@dsldsl && @OliverJosephAsh: $location.hash() 不会重新加载页面。如果是的话，还有其他事情正在发生。 Here is the same plunk with the time being written out as the page is loading, you'll see it doesn't change 如果你想滚动到当前页面上的锚标记而不重新加载路由，你只需做一个常规链接<a href="#foo">foo</a>。我的代码示例是在 routechange 上显示滚动到 id。
@blesh：我建议您在滚动到所需部分后也删除哈希，这样 URL 就不会被真正不应该存在的东西污染。使用这个：$location.search('scrollTo', null)

【解决方案2】：

在我的例子中，我注意到如果我修改了$location.hash()，路由逻辑就会启动。以下技巧奏效了..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

【讨论】：

非常感谢，即使使用@blesh 的 .run(...) 解决方案，路由逻辑也绝对拒绝运行，这对其进行了排序。
您的“保存旧哈希”技巧绝对是救命稻草。它可以防止页面重新加载，同时保持路由清洁。好主意！
不错的一个。但是在实施您的解决方案后，url 没有更新目标 id 的值。
我和 Mohamed 有同样的经历......它确实停止了重新加载，但它显示了无哈希路由（并且 $anchorScroll 没有效果）。 1.2.6 嗯。
我使用$location.hash(my_id); $anchorScroll; $location.hash(null)。它可以防止重新加载，我不必管理 old 变量。

【解决方案3】：

创建链接时无需更改任何路由或其他任何内容只需使用target="_self"

例子：

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

并在 html 元素中使用 id 属性，如下所示：

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

没有必要使用 cmets 中指出/提到的 ## ;-)

【讨论】：

这对我不起作用，但这里的解决方案确实有效：stackoverflow.com/a/19367249/633107
感谢您的解决方案。但是 target="_self" 就足够了。无需加倍#
target="_self" 绝对是最好的答案（正如 Christophe P 所指出的那样，不需要加倍 #）。无论 Html5Mode 是打开还是关闭，这都有效。
简单而完整。为我工作，无需添加另一个角度依赖。
这是正确的解决方案。无需涉及角度 $anchorScroll 服务。有关标签，请参阅文档：https://developer.mozilla.org/en/docs/Web/HTML/Element/a

【解决方案4】：

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

【讨论】：

太棒了！迄今为止最简单的解决方案，但知道如何链接到单独页面上的锚点吗？（即 /products#books ）
我觉得和AngularJS中的解决方案（/products##books）是一样的
根据我的经验，href="##" 仅在注入 $anchorScroll 时有效。
这看起来比较简单，但它不起作用:-(
我添加了 target="_self"，它对页面内所有类型的导航（阅读滑块、转到不同部分等）都非常有效。感谢您分享这个伟大而简单的技巧。

【解决方案5】：

如果你总是知道路线，你可以像这样简单地附加锚点：

href="#/route#anchorID

其中route 是当前的角度路线，anchorID 匹配页面某处的<a id="anchorID">

【讨论】：

这会触发正常的 AngularJS 路由更改，因此不鼓励。就我而言，自从重新加载了常见问题/帮助页面中的 YouTube 视频以来，它非常直观。
@RobinWassén-Andersson 通过在您的路由配置中为该路由指定reloadOnSearch: false，角度不会触发路由更改，只会滚动到 id。结合a标签中指定的完整路由，我想说这是最简单直接的解决方案。
谢谢。这对我有帮助。我没有在我的应用程序中使用任何自定义路由，所以使用 href="#/#anchor-name" 效果很好！

【解决方案6】：

$anchorScroll 适用于此，但在更新的 Angular 版本中使用它有更好的方法。

现在，$anchorScroll 接受哈希作为可选参数，因此您根本不必更改 $location.hash。 (documentation)

这是最好的解决方案，因为它根本不影响路线。我无法让任何其他解决方案发挥作用，因为我正在使用 ngRoute，并且在我设置 $location.hash(id) 之后，路由将重新加载，然后 $anchorScroll 才能发挥它的魔力。

这里是如何使用它...首先，在指令或控制器中：

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

然后在视图中：

<a href="" ng-click="scrollTo(id)">Text</a>

另外，如果您需要考虑固定导航栏（或其他 UI），您可以像这样设置 $anchorScroll 的偏移量（在主模块的 run 函数中）：

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

【讨论】：

谢谢。您将如何实施与路由更改相结合的哈希链接策略？示例：单击此导航项，将打开一个不同的视图并向下滚动到该视图中的特定id。
抱歉纠缠..如果你有机会可以看看我的堆栈问题吗？我觉得你在这里的回答让我如此接近，但我无法实现它：stackoverflow.com/questions/41494330/…。我也在使用ngRoute 和较新版本的 Angular。
很抱歉我还没有尝试过那个特殊的案例......但是你看过$location.search()或$routeParams吗？也许您可以在初始化控制器时使用其中一个 - 如果您的 scrollTo 搜索参数在 URL 中，那么控制器可以使用上面的 $anchorScroll 来滚动页面。
通过将 Id 直接传递给 $anchorScroll，我的路线从 /contact#contact 变成了 /contact 。恕我直言，这应该是公认的答案。

【解决方案7】：

这是我使用指令的解决方案，它看起来更像 Angular-y，因为我们正在处理 DOM：

Plnkr over here

github

代码

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

我使用了 $anchorScroll 服务。为了抵消随着哈希更改而发生的页面刷新，我继续并取消了 locationChangeStart 事件。这对我有用，因为我有一个连接到 ng-switch 的帮助页面，刷新基本上会破坏应用程序。

【讨论】：

我喜欢你的指令解决方案。但是，如果您想加载另一个页面并同时滚动到锚点位置，您会怎么做。如果没有 angularjs，它通常是 href="location#hash"。但是您的指令会阻止页面重新加载。
@CMCDragonkai 使用我的指令，我不确定，因为我使用了对 $anchorScroll 的调用，它看起来只处理滚动到页面上当前的元素。您可能不得不与$location 或$window 混淆才能获得涉及页面更改的内容。
您需要取消订阅 locationChangeStart 事件： var off = scope.$on('$locationChangeStart', function(ev) { off(); ev.preventDefault(); });
很好@EugeneTskhovrebov，我继续并在编辑中将其添加到答案中。

【解决方案8】：

尝试为角度路由设置哈希前缀$locationProvider.hashPrefix('!')

完整示例：

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

【讨论】：

这不会影响结果。不过会很甜。
你确定。为什么这不起作用？如果哈希前缀是!，那么哈希路由应该是#!page。因此 AngularJS 应该检测它何时只是一个#hash，它应该自动锚定滚动并适用于 HTML5 模式 url 和 hash 模式 url。

【解决方案9】：

我在我的应用程序的路由逻辑中解决了这个问题。

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

【讨论】：

这不起作用：错误：[$injector:modulerr] 无法实例化模块角度，原因是：错误：when() 中的“处理程序”无效

【解决方案10】：

这是一篇旧帖子，但我花了很长时间研究各种解决方案，所以我想分享一个更简单的解决方案。只需将target="_self" 添加到<a> 标签即可为我修复它。该链接有效，并将我带到页面上的正确位置。

但是，Angular 仍然在 URL 中使用 # 注入了一些奇怪的东西，因此在使用此方法后，使用后退按钮进行导航等可能会遇到麻烦。

【讨论】：

【解决方案11】：

这可能是 ngView 的一个新属性，但我已经能够使用ngView autoscroll 属性和“双哈希”使其锚散列链接与angular-route 一起使用。

ngView (see autoscroll)

（以下代码与angular-strap一起使用）

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

【讨论】：

【解决方案12】：

我可以这样做：

<li>
<a href="#/#about">About</a>
</li>

【讨论】：

【解决方案13】：

这是一种肮脏的解决方法，通过创建将滚动到指定元素的自定义指令（使用硬编码的“faq”）

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

【讨论】：

这确实有效，但正如你所说，它很脏。很肮脏。让我们看看其他人是否能想出一个更漂亮的解决方案，否则我将不得不这样做。
Angular 已经通过 $anchorScroll 内置了 scrollTo 功能，请参阅我的回答。
将 plunker 更改为不那么脏：它使用 $location.path() 因此源代码中没有硬编码的“faq”。并且还尝试使用$anchorScroll，但似乎由于路由它不起作用...

【解决方案14】：

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

【讨论】：

【解决方案15】：

如果您不喜欢使用ng-click，这里有一个替代解决方案。它使用filter 根据当前状态生成正确的url。我的示例使用 ui.router。

好处是用户将看到链接悬停在哪里。

<a href="{{ 'my-element-id' | anchor }}">My element</a>

过滤器：

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

【讨论】：

【解决方案16】：

我使用 ng-route 的解决方案是这个简单的指令：

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

html 看起来像：

<a href="" scrollTo="yourid">link</a>

【讨论】：

您是否不必指定scroll-to="yourid" 之类的属性并将指令命名为scrollTo（并以attrs["scrollTo"] 访问该属性？此外，如果没有明确包含jQuery，则必须绑定处理程序element.on('click', function (e) {..}).

【解决方案17】：

您可以尝试使用anchorScroll。

Example

所以控制器是：

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

还有观点：

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

...并且没有任何关于锚点 ID 的秘密：

<div id="foo">
  This is #foo
</div>

【讨论】：

【解决方案18】：

我试图让我的 Angular 应用在加载时滚动到一个锚点，但遇到了 $routeProvider 的 URL 重写规则。

经过长时间的实验，我决定这样做：

从 .run() 部分注册一个 document.onload 事件处理程序 Angular 应用程序模块。
在处理程序中找出原来的有锚标记应该是通过做一些字符串操作。
使用剥离的锚标记覆盖 location.hash（其中导致 $routeProvider 立即用它再次覆盖它 “＃/“ 规则。但这很好，因为 Angular 现在与 URL 中发生了什么 4) 调用 $anchorScroll()。

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

【讨论】：

【解决方案19】：

我不能 100% 确定这是否一直有效，但在我的应用程序中，这给了我预期的行为。

假设您在关于页面上，并且您有以下路线：

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

现在，在你的 HTML 中

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

总结

在锚点之前包含页面名称对我有用。让我知道你的想法。

缺点

这将重新渲染页面，然后滚动到锚点。

更新

更好的方法是添加以下内容：

<a href="#tab1" onclick="return false;">First Part</a>

【讨论】：

【解决方案20】：

轻松获得滚动功能。它还支持动画/平滑滚动作为附加功能。 Angular Scroll 库的详细信息：

Github - https://github.com/oblador/angular-scroll

鲍尔：bower install --save angular-scroll

npm：npm install --save angular-scroll

精简版 - 只有 9kb

平滑滚动（动画滚动） - 是的

Scroll Spy - 是的

文档 - 非常好

演示 - http://oblador.github.io/angular-scroll/

希望这会有所帮助。

【讨论】：

【解决方案21】：

见https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/$routeProvider

[reloadOnSearch=true] - {boolean=} - 当只有 $location.search() 或 $location.hash() 改变时重新加载路由。

将此设置为 false 对我来说没有上述所有内容就可以了。

【讨论】：

【解决方案22】：

基于@Stoyan，我想出了以下解决方案：

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

【讨论】：

【解决方案23】：

在更改路线时，它将滚动到页面顶部。

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

将此代码放在您的控制器上。

【讨论】：

【解决方案24】：

在我看来@slugslog 有它，但我会改变一件事。我会改用替换，这样您就不必重新设置它。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

Docs 搜索“替换方法”

【讨论】：

【解决方案25】：

上面的解决方案都不适合我，但我刚刚尝试过，它奏效了，

<a href="#/#faq-1">Question 1</a>

所以我意识到我需要通知页面从索引页面开始，然后使用传统的锚点。

【讨论】：

【解决方案26】：

有时在 angularjs 应用程序哈希导航中不起作用，并且引导 jquery javascript 库广泛使用这种类型的导航，使其工作添加 target="_self" 到锚标记。例如<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

【讨论】：

【解决方案27】：

我使用的是 AngularJS 1.3.15，看起来我不需要做任何特别的事情。

https://code.angularjs.org/1.3.15/docs/api/ng/provider/$anchorScrollProvider

因此，以下内容在我的 html 中适用于我：

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

我根本不需要对我的控制器或 JavaScript 进行任何更改。

【讨论】：

【解决方案28】：

试试这个将解决锚问题。

app.run(function($location, $anchorScroll){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

【讨论】：