问题

Question

如何配置AngularJs滚动到href中指定的锚元素#id？

问题

带有哈希的锚链接，例如HREF =＆＃34;＃建议报告＆＃34;成为网址＃/推荐而不是网址＃推荐所以它不会按预期滚动。如果未加载angularjs库，则可以正常工作。在状态栏中，当我将光标移动到链接顶部时，浏览器的状态栏正确显示了我即将前进的链接，但点击后它将被转换，不会正确滚动。我没有使用有角度的路线。

我的AngularJS代码中可能干扰滚动/ js位置操作的片段：

...
app.config([ '$httpProvider', '$compileProvider', function($httpProvider, $compileProvider) {
    $compileProvider.debugInfoEnabled(false);
    // Initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }

    // Disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
} ]);
...
app.directive('jumpForm', function($timeout) {
    return {
        restrict : 'A',
        link : function(scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function() {
                $timeout(function() {
                    // find the first invalid element
                    var firstInvalid = elem[0].querySelector('.has-error');

                    // if we find one, set focus
                    if (firstInvalid) {

                        $('html, body').animate({
                            duration : 2000,
                            scrollTop : (firstInvalid.offsetTop + 100)
                        });
                    }
                }, 200);

            });
        }
    };
});
...
app.factory('httpResponseInterceptor', [ '$q', '$location', '$window', function($q, $location, $window) {
    return {
        response : function(response) {
            if (response && response.data && response.data.errorCode == 'AUTHENTICATION_REQUIRED') {
                var _context = $("body").attr("data-context");
                var redirectUrl = _context + '/registration?msg=session_expired';
                $window.location.href = redirectUrl;
                return $q.reject(response);
            }
            return response;
        }
    }
} ]);

app.config([ '$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('httpResponseInterceptor');
} ]);

使用＃标签调用：

<a href="#recommanded"> </a>

试验和错误

内部解决方法

anchorScroll

在帖子How to handle anchor hash linking in AngularJS中，建议插入以下代码段：

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

并称之为：

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

这导致控制台上没有错误，但只是与以前相同的行为。 Url转换为无滚动到锚点。另外，我不喜欢最终为此设置ng-click功能的想法。

附上我的angularjs：

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#recommanded">Test/Foo</a>

导致没有错误，但滚动不能正常工作。

有人暗示只是在href中做＃/＃推荐。使用target =＆＃34; _self＆＃34;。他们都没有为我效劳。

外部解决方案

指令scrollTo

   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="recommanded">link</a>

这个实际上有效，但更喜欢一个解决方案，其中呼叫href =＆＃34;＃recommended＆＃34;只是工作。或者至少为滚动设置动画。

angular-scroll＆＃du smooth-scroll

将duScroll添加到我的angularApp.js：var app = angular.module('app', [ ..., 'duScroll' ]); 我在angularApp.js文件中加载了angular-scroll.min.js文件，没有错误。我将<a du-smooth-scroll href="#recommended-to-you">recommanded</a>称为具有该ID的现有div。但它不会做任何事情，没有js错误但不会移动。尝试使用duScroll模块添加明确的缓动持续时间等设置，没有错误但无法正常工作。

Answer 1

html5Mode

如angular add slash before hash in url中所述，我试图通过添加：

打开html5模式

app.config(function($locationProvider) {
          $locationProvider.html5Mode(true);
        })

我在head部分设置了基本标记。

这些设置使其开始按预期工作。

...但我要提一下，如果我再次点击链接，地址栏中的位置更新为引用的哈希值，它只是略微下降而不是引用的位置。点击具有不同锚点的链接，效果很好。不确定这是一般错误还是仅我的某些设置是回火。

在href中使用散列的AngularJs会中断滚动并将url转换为hash + fwslash + id

问题