如何处理锚哈希链接在AngularJS

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

对于一个简单的faq页面，我有以下标记

<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。然后使用jQuery向下滚动到它。

但是AngularJS又把我搞砸了，反正就是滚动到页面顶部。

有人在过去做过类似的事情并且知道一个好的解决方法吗?

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

当前回答

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

2016-11-17 11:13:54

其他回答

在我的例子中，我注意到如果修改$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);
};

2013-04-10 20:13:01

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

[reloadOnSearch=true] - {boolean=} -仅当$location.search()或$location.hash()发生变化时重新加载路由。

对我来说，把这个设置为false就可以了。

2016-04-02 08:19:14

试试这个可以解决锚的问题。

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

2021-07-08 14:42:02

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

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

凉亭:凉亭安装-保存角度-滚动

NPM install——保存angular-scroll

精简版-只有9kb

平滑滚动(动画滚动)-是的

滚动间谍-是的

文档-优秀

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

希望这能有所帮助。

2016-03-24 09:58:27

有时在angularjs应用哈希导航不工作和bootstrap jquery javascript库大量使用这种类型的导航，使其工作添加target="_self"到锚标签。例如:<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

2016-03-30 16:09:55

如何处理锚哈希链接在AngularJS

推荐文章

最新文章

标签