单击顶部的按钮不适用于 AngularJS 路由器链接答案

【问题标题】：Click button to the top page doesnt work with AngularJS Router link单击顶部的按钮不适用于 AngularJS 路由器链接
【发布时间】：2018-04-19 16:39:34
【问题描述】：

单击页脚页面底部的按钮后，我在尝试使用 AngularJS ng-include 登陆不同页面的顶部时遇到问题。

HTML (index.html)

<body>

<a name="top"></a>

<!-- header section -->
 <div ng-include="'views/header.html'"></div>

<!-- views section -->
<div ng-view></div>

<!-- footer section -->
<div ng-include="'views/footer.html'"></div>

</body>

HTML (footer.html) href="#!request" 用于加载请求页面 - 工作正常，但没有到达请求页面的顶部。

<div class="cont3">
    <div><a href="#!request" class="footer-link" id="myBtn">Request an interpreter</a></div>
</div>

Javascript

<script type="text/javascript">
if ($('#myBtn').length) {
    var scrollTrigger = 100, 
    backToTop = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > scrollTrigger) {
            $('#myBtn').addClass('show');
        } else {
            $('#myBtn').removeClass('show');
        }
    };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#myBtn').on('click', function (e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    }, 100);
    });
}
</script>

【问题讨论】：

你真的应该做出选择：要么你想使用 jQuery（这会比帮助更破坏你的应用程序），或者你可以使用 Angular 并利用 Angular 提供的所有帮助。您应该使用ui-sref 作为您的链接。它将使用 ui-router 简化您的生活。
问题是你在#!之后缺少/
有人告诉我删除/，它对我有用，但是当我单击页脚上的按钮时，它部分落在了另一页上。我明白你关于选择“ui-sref”来保留 Angular 应用程序的观点。我要看看这是否有效。谢谢！
在这种情况下，您应该阅读有关散列页面链接的信息："A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID of an HTML element) within the current document."，并将其与 Google（已弃用）的 Hashbang and HTML5 Modes 理念区分开来。当前版本的 Angular（包括 AngularJS）不提倡使用 Hashbang URL。

标签： javascript angularjs angular-ui-router

【解决方案1】：

正如 Randy 所说，您面临的主要问题不是如何进行自动滚动，而是使用两个可以完成非常相似的事情的框架（AngularJS 和 jQuery）。使用 jQuery 可以做的事情真的很少，而使用 Angular 是无法做到的。

查看这篇文章的答案，了解在导航事件中始终自动滚动到顶部的几种方法：https://stackoverflow.com/a/27430246/3877743

祝你好运！

【讨论】：