href滚动锚angularjs

时间:2018-07-31 10:27:31

标签: html angularjs

在使用angularjs的href / anchor滚动时遇到问题。单击h ref链接后,它始终会链接到索引页面示例,例如http://xxxxxx/#!/index#sec-menu,不确定我在做什么错。

感谢您的帮助。

HTML

<div class="nav-holder main-menu">
    <nav>
        <ul>
            <li>
                <a href="#sec-menu">Menu</a>
            </li>
        </ul>
    </nav>
</div>

<span class="fw-separator" id="sec-menu"></span>

不确定这是否是原因,但是我的app.js中有类似的内容

.otherwise({
  redirectTo: '/index'
});

1 个答案:

答案 0 :(得分:0)

<div class="nav-holder main-menu">
  <nav>
     <ul>
        <li>
            <a ng-href="#/?scroll=sec-menu">My element</a>
        </li>
    </ul>
  </nav>
 </div>
 <span class="fw-separator" id="sec-menu"></span>

在app.js的模块声明中更改运行代码,如下所示:

app.run(function($location, $rootScope) {
 $rootScope.$watch(function() { return $location.search() }, function(search) {
 var po= 0;
 if (search.hasOwnProperty('scroll')) {
   var $target = $('#' + search.scroll);
   po= $target.offset().top;
   }
 $("body,html").animate({scrollTop: po}, "slow");
 });
})