javascript - 如何在 AngularJS 中处理锚散列链接

Question

你们中有人知道如何在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+，所以我担心这不是一个可接受的解决方案：/

score 379 · Accepted Answer

你正在寻找$anchorScroll().

这是（蹩脚的）文档。

这是来源。

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

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>

这是一个 plunker 来演示

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

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

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>

这是一个使用路由和 $anchorScroll 演示滚动的 Plunker

甚至更简单：

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>

score 171 · Accepted Answer

就我而言，我注意到如果我修改了$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);
};

score 53 · Accepted Answer

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>

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

score 41 · Accepted Answer

<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>

score 20 · Accepted Answer

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

href="#/route#anchorID

route当前的角度路线在哪里并与页面上的某个位置anchorID匹配<a id="anchorID">

score 14 · Accepted Answer

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

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

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

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

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

然后在视图中：

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

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

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

score 13 · Accepted Answer

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

Plnkr 在这里

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 的帮助页面，刷新基本上会破坏应用程序。

score 5 · Accepted Answer

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

完整示例：

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

score 5 · Accepted Answer

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

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;
      }
    });
}

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

ngView（见自动滚动）

（以下代码与 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>

score 3 · Accepted Answer

3

我可以这样做：

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

于 2015-12-03T19:07:35.623 回答

score 2 · Accepted Answer

这是通过创建将滚动到指定元素的自定义指令（使用硬编码的“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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

如果您不喜欢使用ng-click这里的替代解决方案。它使用 afilter根据当前状态生成正确的 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;
    };
}])

score 2 · Accepted Answer

我使用 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>

score 1 · Accepted Answer

您可以尝试使用anchorScroll。

例子

所以控制器将是：

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>

score 1 · Accepted Answer

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

经过长时间的实验，我确定了这一点：

从 Angular 应用模块的 .run() 部分注册一个 document.onload 事件处理程序。
在处理程序中，通过执行一些字符串操作找出原始的锚标记应该是什么。
用剥离的锚标记覆盖 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();
			}
		}	 
 });

score 1 · Accepted Answer

我不是 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>

score 1 · Accepted Answer

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

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

鲍尔：bower install --save angular-scroll

npm：npm install --save angular-scroll

Minfied 版本- 只有 9kb

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

滚动间谍- 是的

文档- 优秀

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

希望这可以帮助。

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

基于@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();
        }
    }
});

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

在我看来@slugslog 有它，但我会改变一件事。我会改用替换，所以你不必重新设置它。

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

文档搜索“替换方法”

score 0 · Accepted Answer

上面的解决方案都不适合我，但我只是尝试了这个，它奏效了，

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

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

score 0 · Accepted Answer

我正在使用 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 进行任何更改。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

试试这个将解决锚问题。

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'
            });
        });
    });
});

javascript - 如何在 AngularJS 中处理锚散列链接

28 回答 28

代码

HTML

Related

Reference