滚动页面至页面重新加载时的哈希位置-AngularJS

我正在用angularJS开发一个网站，并使用twitter引导UI。我有一些散列

id

与某个部分关联，所以当用户单击导航时，页面向下滚动到该部分。这对我来说很好

此处为网站链接：

现在进入关于第页。我有正确的导航滚动页面到特定的位置。但当我重新加载该页面时，页面从顶部开始，不会向下滚动到

hash

位置，如

针对上述问题，有两种解决方案：

当我们重新加载该页面时，从URL中删除哈希标记

滚动页面至页面重新加载上的特定（哈希）部分

由于我仍在学习angularJS，我无法找到上述问题的任何具体解决方案

非常感谢您的帮助。

请使用此服务

这里的问题是，Angular以数字方式加载关于的内容，因此当您有散列时，您没有准备好内容

$anchorScroll

跟踪哈希并为您滚动

// Just borrow from your code    
angular.module('aboutController', []).controller('aboutController',['$scope', '$location', '$anchorScroll', 
    function($scope, $location, $anchorScroll) {

  $scope.isActive = function(route){
     return route === $location.hash();
  }

  $anchorScroll();
}]);

编辑31/12： 由于Mohit（问题的创建者）说我的解决方案对他不起作用，我决定下载代码并在本地工作。我的解决方案在本地运行，这让我抓狂，但我想指出代码中的一些版本可能（或者很可能不）可以解决这个问题

将脚本移动到页面底部（index.html） 并在访问URL之前附加

/#/

暂停 这是目前为止我不建议的一个，但你当然可以试一试

$timeout(function() {
    $anchorScroll(); 
}, 0)

---

在为angularJS投入更多时间后，我发现，

$anchorScroll

需要像@Rigoti所说的那样工作。但不知怎么的，这对我不起作用

或者，我发现我们可以使用工厂/服务创建我们自己的方法，或者我们也可以创建一个单独的类/对象，比如实用程序文件，然后可以在angular模块中使用它。 因此，我创建了一个util文件，并添加了一个方法来使用brettdewoody的这个伟大的提琴提供平滑的滚动

之后，我修改了我的代码，这样我就可以访问该方法并调用它

关于.js

angular.module('aboutController', []).controller('aboutController',['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

    // create local instance of utility object
    $scope.util = util;

    // move scroll position to passed id
    $scope.moveTo = function(id){
        // set hash location to clicked id so that isActive class is added to it.
        $location.hash(id);
        // scroll to element id
        $scope.util.scrollTo(id);
    }

    // set active class to right hand navigation on route change
    $scope.isActive = function(route){
        return route === $location.hash();
    }

    // if hash is available, scroll to hash position on page reload
    //$anchorScroll();
    if(!$scope.util.isNull($location.hash()))
        $scope.util.scrollTo($location.hash());

}]);

/**
 * Created by admin on 22/12/14.
 */

var util = {
    scrollTo: function(id) {

        // This scrolling function
        // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript

        var startY = currentYPosition();
        var stopY = elmYPosition(id);
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            scrollTo(0, stopY);
            return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        var step = Math.round(distance / 25);
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for (var i = startY; i < stopY; i += step) {
                setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
                leapY += step;
                if (leapY > stopY) leapY = stopY;
                timer++;
            }
            return;
        }
        for (var i = startY; i > stopY; i -= step) {
            setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
            leapY -= step;
            if (leapY < stopY) leapY = stopY;
            timer++;
        }

        function currentYPosition() {
            // Firefox, Chrome, Opera, Safari
            if (self.pageYOffset) return self.pageYOffset;
            // Internet Explorer 6 - standards mode
            if (document.documentElement && document.documentElement.scrollTop)
                return document.documentElement.scrollTop;
            // Internet Explorer 6, 7 and 8
            if (document.body.scrollTop) return document.body.scrollTop;
            return 0;
        }

        function elmYPosition(id) {
            var elm = document.getElementById(id);
            var y = elm.offsetTop;
            var node = elm;
            while (node.offsetParent && node.offsetParent != document.body) {
                node = node.offsetParent;
                y += node.offsetTop;
            }
            return y;
        }
    },
    isNull: function (o) {
        return angular.isUndefined(o) || o === null || o === '';
    }
}

util.js

angular.module('aboutController', []).controller('aboutController',['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

    // create local instance of utility object
    $scope.util = util;

    // move scroll position to passed id
    $scope.moveTo = function(id){
        // set hash location to clicked id so that isActive class is added to it.
        $location.hash(id);
        // scroll to element id
        $scope.util.scrollTo(id);
    }

    // set active class to right hand navigation on route change
    $scope.isActive = function(route){
        return route === $location.hash();
    }

    // if hash is available, scroll to hash position on page reload
    //$anchorScroll();
    if(!$scope.util.isNull($location.hash()))
        $scope.util.scrollTo($location.hash());

}]);

/**
 * Created by admin on 22/12/14.
 */

var util = {
    scrollTo: function(id) {

        // This scrolling function
        // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript

        var startY = currentYPosition();
        var stopY = elmYPosition(id);
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            scrollTo(0, stopY);
            return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        var step = Math.round(distance / 25);
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for (var i = startY; i < stopY; i += step) {
                setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
                leapY += step;
                if (leapY > stopY) leapY = stopY;
                timer++;
            }
            return;
        }
        for (var i = startY; i > stopY; i -= step) {
            setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
            leapY -= step;
            if (leapY < stopY) leapY = stopY;
            timer++;
        }

        function currentYPosition() {
            // Firefox, Chrome, Opera, Safari
            if (self.pageYOffset) return self.pageYOffset;
            // Internet Explorer 6 - standards mode
            if (document.documentElement && document.documentElement.scrollTop)
                return document.documentElement.scrollTop;
            // Internet Explorer 6, 7 and 8
            if (document.body.scrollTop) return document.body.scrollTop;
            return 0;
        }

        function elmYPosition(id) {
            var elm = document.getElementById(id);
            var y = elm.offsetTop;
            var node = elm;
            while (node.offsetParent && node.offsetParent != document.body) {
                node = node.offsetParent;
                y += node.offsetTop;
            }
            return y;
        }
    },
    isNull: function (o) {
        return angular.isUndefined(o) || o === null || o === '';
    }
}

/**
*由管理员于2014年12月22日创建。
*/
var util={
滚动至：功能（id）{
//这个滚动功能
//来自http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
var startY=currentYPosition（）；
var stopY=elmYPosition（id）；
var距离=停止>开始？停止-开始：开始-停止；
如果（距离<100）{
滚动到（0，停止）；
返回；
}
var速度=数学圆（距离/100）；
如果（速度>=20）速度=20；
var步长=数学圆（距离/25）；
var leapY=stopY>startY？startY+step：startY-step；
var定时器=0；
如果（停止>开始）{
对于（var i=开始；i<停止；i+=步骤）{
设置超时（“窗口滚动到（0，+leapY+”），计时器*速度）；
跳跃+=步进；
如果（leapY>stopY）leapY=stopY；
定时器++；
}
返回；
}
对于（变量i=开始；i>停止；i-=步骤）{
设置超时（“窗口滚动到（0，+leapY+”），计时器*速度）；
跳跃-=步进；
如果（leapY

about.html

<li><a ng-class="{active:isActive('about')}" ng-click="moveTo('about')">About</a></li>
<li><a ng-class="{active:isActive('keraleeyam')}" ng-click="moveTo('keraleeyam')">Keraleeyam Ayurveda</a></li>
<li><a ng-class="{active:isActive('management')}" ng-click="moveTo('management')">Management</a></li>
<li><a ng-class="{active:isActive('treatment')}" ng-click="moveTo('treatment')">Panchakarma Treatment</a></li>

关于
阿育吠陀
管理层
Panchakarma疗法

而且，这对我很有效：）。我还对live URL进行了更改，以便您可以查看它

---

注意：我仍在等待使用

$anchorScroll

方法的解决方案。因此，如果您发现了我遗漏的任何内容，请帮助我。

您可以使用指令并查看其中的范围值：

var app = angular.module('plunker', ['LocalStorageModule']);

app.controller('MainCtrl', [ '$scope', 'localStorageService', function($scope, localStorageService) {
  if(localStorageService.isSupported) {
    $scope.util = localStorageService.get('anchor');
    console.log(localStorageService.get('anchor'));
  }
  else{
    $scope.util = "third";
  }

  $scope.moveTo = function(anchor){
    console.log('controller anchor value:', anchor);
    $scope.util = anchor;
    if(localStorageService.isSupported) {
      localStorageService.set('anchor', anchor);
    }
  };


}]);

app.directive('scrollToAnchor', ['$location', '$anchorScroll', function($location, $anchorScroll){
  return{
    restrict: 'A',
    scope: {
      anchor: '='
    },
    link: function(scope, element){
        scope.$watch('anchor', function(){
          $location.hash(scope.anchor);
          $anchorScroll();
          console.log('directive anchor value:', scope.anchor);
        });
    }
  };
}]);

我不知道这是否是最好的方法，但在滚动到元素之前，需要先渲染dom

---

这里是plnkr:

@Rigoti：你是对的，但不幸的是，当我重新加载内容时，这不起作用。当我添加

$anchorScroll

时，当我重新加载页面时，它不会起任何作用。@MohitPandey这里有点晚了，我猜不出这里会出什么问题，我已经有了这个问题，这个问题已经为我解决了。您是否尝试过将脚本移动到

的底部？@Rigoti:谢谢，将脚本文件移动到

的底部。您找到解决方案了吗？因为您在问题中发布的示例页面现在似乎工作正常。@AndrewCounts:是的，现在我使用javascript

scroll

方法更改了代码（也将其上载到提供的链接）。但不幸的是，

$anchorScroll

在重新加载页面时无法按预期工作。也许DOM调用时还没有准备好。如果你有一个角度的解决方案，那么我喜欢实现它。看一下方法的答案