Question

我正在使用Angular作为网络应用。我使用Angular UI引导程序在我的页面中显示警报，作为对某些操作的响应，比如单击按钮。但是，我将此警报div放在页面的开头。我的页面很长。因此，当我在页面中间某处发生警报时，用户将不知道发生了警报，因为它位于页面的开头。我想在页面发生时自动滚动页面以提醒警报区域。怎么做？

与此https://stackoverflow.com/a/24203856/2182674相关的一些内容，但在页面中的固定位置显示效果不佳。这是覆盖页面内容而不适合我的情况。

警报内容由角度控制器设置。所以使用href锚点按钮将不起作用。

Answer 1

触发操作时，您可以使用以下内容滚动到alert元素：

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

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

Answer 2

Angular可以$anchorScroll到一个元素：

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();
    };
  }]);

Answer 3

您可以使用简单的锚点html元素执行此操作：

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

当用户位于页面的不同位置时，如何在UI引导程序中显示警报

3 个答案: