时间戳

首页 > 解决方案 > href滚动锚angularjs

html - href滚动锚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'
});

标签： htmlangularjs

解决方案

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

推荐阅读