解决angularjs锚点跟路由冲突的问题

AngularJs中锚点的使用，及锚点偏移量设置

http://blog.csdn.net/M_killer/article/details/50394254

AngularJS中关于锚点的使用，及锚点偏移量设置
有很多人在使用ng-view时都用到了#号做route，所以如果在页面上需要用到锚点的时候就会比较头疼了。这个时候可以使用ng的anchorScroll。
使用了ng的anchorScroll后确实可以达到锚点跳转的作用了，但是问题又来了，我如果页面有一个标题栏这个锚点的跳转就不准确了，此时则需要设置偏移量了。

使用函数：
$anchorScroll([hash]);

Param	Type	Details
hash (optional)	string	The hash specifying the element to scroll to. If omitted, the value of $location.hash() will be used.

如果设置，指定一个垂直滚动偏移。这通常是有用的，当有在页面的顶部有“fixed”定位的元素，如导航栏，标题等

yOffset 可以以各种方式来指定：

• number: 要用作偏移像素的固定数量。
  
  
• function: 每次$anchorScroll() 函数执行完毕，必定返回一个数字，代表偏移量（以像素为单位）。
  
  
• jqLite: 一个jqLite/ jQuery的元素用于指定偏移量。从页面的元素的顶部到底部的距离将被用作偏移。
  
  Note: 该元素只要其position被设置为fixed。当响应导航栏/头，根据视口大小调整高度和/或定位时，使用此选项很有用。

为了 yOffset正常工作，滚动应写在文档的根而不是一些子元素。

示例代码：

angular.module('myApp', ['ngRoute'])
    .run(['$anchorScroll', function($anchorScroll) {
        $anchorScroll.yOffset = 50;   
        // 默认向下便宜50px
        // 在此处配置偏移量
    }])

    .controller('View1Ctrl', ['$scope', '$location', '$anchorScroll', function ($scope, $location, $anchorScroll) {
        $scope.demo = function () {
            $location.hash('test');
            $anchorScroll();
            //移动到锚点
        };
    }]);




HTML代码：
<div class="center main-text">
    <br><br>
    <a href="" ng-click="demo();">hahah</a>
    <!--执行demo()函数跳转到锚点-->

    <p id="test">Welcome to SaLibs.</p>
    <!--此处设置id-->
    <!--一下部分为了增加HTML代码的长度，并无实际意义-->
    <a>This is the partial for view 1.</a>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <p>This is the partial for view 1.</p>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <p>This is the partial for view 1.</p>
</div>




附上AngularJs的官方Api 

参考资料：https://docs.angularjs.org/api/ng/service/$anchorScroll






http://www.cnblogs.com/wolf-sun/p/5306522.html

[Angularjs]锚点操作服务$anchorScroll



   
   


    
    
写在前面

    
    
有个单页应用的项目中，需要通过锚点进行页面的定位。但angularjs的路由会出现跟锚点冲突，angularjs会将锚点当成路由进行解析，造成跳转到这个页面，而我们需要的只是跳转到当前的锚点位置。angularjs的路由格式#/home/en。比如锚点的id为navigate-label，当触发跳转到锚点时，会出现#/navigate-label.

    
    
解决办法

    
    
angularjs提供了一个$anchorScroll，用来实现锚点的功能。

    
    
用法如下：

    
    
在controller中引入$anchorScroll.

    
    
在该controller中，就可以通过下面的方式实现当前页面锚点定位。

    
    


     
     
app.controller('MyController', function ($scope, $anchorScroll, $http, $location, $routeParams, $translate) {
            $location.hash('navigate-label');
            $anchorScroll();
});

    
    

    
    
如果发现没效果，可能因为页面上ng-repeat的东西没加载完成。可添加指令。具体解决办法可参考我这篇文章：

    
    
http://www.cnblogs.com/wolf-sun/p/5089637.html