Javascript 当用户处于页面中的不同点时，如何在UI引导中显示警报

我正在使用Angular作为web应用程序。我使用Angular UI引导在我的页面中显示一个警报，作为对某个操作的响应，比如说单击按钮。不过，我将此警报div放在页面的开头。我的页面很长。因此，当我在页面中间的某个位置出现警报时，用户不会知道警报发生了，因为它位于页面的开头。我想滚动页面自动提醒区域时，它发生了。如何做到这一点

有些内容与此相关，但在页面中的固定位置显示看起来不太好。这是重叠的页面内容，不适合我的情况

---

警报内容由控制器以角度设置。因此，使用href anchor for button将不起作用。

您可以使用一个简单的锚html元素来实现这一点：

<a id="myalert">Alerte</a>
...
<a href="#myalert">Go to the alert</a>

---

触发该操作时，您可以使用如下方式滚动到警报元素：

$("#button").click(function() {
    /* trigger UI bootstrap alert */
    /* ... */

    $('html, body').animate({
        scrollTop: $("#alertElementtoScrollToID").offset().top
    }, 2000);
});

与一个元素的角度：

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

---

基本上，点击一个按钮，Angular中的控制器将执行一些操作并返回响应。响应显示在UI引导警报中。这是jquery吗？我用的是有角度的。现在我使用$window.scrollTo（0，0）；，但它并没有给你一个很好的滚动动画效果。你不想使用jQuery有什么具体的原因吗？现在，这几乎是一个标准，即使是这个网站也在使用它。因为我的应用程序运行在Angular上，我不想两者兼而有之。最终，这是你的选择。但是如中所述，Angular很好地使用了jQuery。。而不是$anchorScroll。它添加了平滑的滚动行为，这对用户来说只是不那么刺耳。也就是说，我将使用模态而不是警报。从用户体验的角度来看，这比控制和滚动内容中用户强迫他们再次“找到自己的位置”（尤其是在移动设备上！）的位置要好得多。