无法使用 Angular 应用程序中的哈希滚动到 div 元素答案

【问题标题】：Unable to scroll to a div element using hash in Angular app无法使用 Angular 应用程序中的哈希滚动到 div 元素
【发布时间】：2017-06-01 12:40:18
【问题描述】：

我已阅读 here 和 here，仅使用哈希选择器和 id attr 即可将页面滚动到特定元素。

但由于某些原因，我无法在我的 Angular 应用程序中执行此操作。这可能是由于我的应用程序中使用了路由 (angular-ui-router) 造成的吗？

我想要做的是移动到我的一个页面的特定部分，顺便说一下，这些部分使用路由加载到一个状态。

我有：

        <div class="nav_panel">
         <a class="nav_links" href="#footer">Footer</a>
       </div>

和

<div class="homeFooter" id="footer">
        <div class="social_icons">
            <span class="gplus"></span>
            <span class="fb"></span>
            <span class="twitter"></span>
            <span class="whatsapp"></span>
            <span class="youtube"></span>
        </div>
</div>

在同一个模板上。

有没有办法让它与路由一起工作（如果这很重要的话）还是我在这里做错了什么？

【问题讨论】：

你试过ngHref="#footer 吗？
你能发布更多你的代码吗？原则上，这应该按照您的方式工作，但如果它不起作用，那么可能有其他东西阻碍了它。至于平滑滚动，我假设您也应用了 JS 代码？最后，您提供的第一个链接似乎与其他主题有关。
@Zooly 不，我还想尝试 ngHref。将尽快检查并更新
@webbm 抱歉链接错误。我已经纠正了。这是一个巨大的应用程序中的一个页面。如果可能的话，我会尝试发布一个小提琴

标签： javascript html angularjs scroll

【解决方案1】：

基于this answer，您可以将_target属性添加到<a>标签。

根据您的需要，_target 的值是 self。这是一个与所有最新浏览器兼容的属性，它会将您重定向到与用户单击同一帧中的链接（例如，对 SPA 很有用）

<a href="#footer" target="_self">Go to the footer</a>


<div id="footer">Welcome to the footer</div>

【讨论】：

很高兴听到这个消息:)