0

我正在使用使用 Flexbox 显示模型的 Angular Material 来构建 Web 应用程序。<body> 的滚动位置在 (0,0)，因为应用程序是“整页”，但我想在工具栏中添加一个按钮来滚动到主要内容 <div> 的顶部。不确定这是否可能，因为我认为 Flexbox API 不会向 JavaScript 公开这样做的能力。

尝试的解决方案：

window.scrollTo(0,0);
document.getElementById('elementId').scrollIntoView();
4

1 回答 1

1

我的 HTML 如下所示：

<div id="main" layout="column" flex>
    <md-toolbar></md-toolbar>
    <md-content></md-toolbar>
</div>

我尝试定位<div>并使用 JavaScript 滚动到顶部，如下所示：

document.getElementById('main').scrollTop = 0;

但这不起作用，因为<div id="main">' 的scrollTop值等于 0，因为它是一个整页的 web 应用程序。

我将id属性移动到<md-content>元素：

<div layout="column" flex>
    <md-toolbar></md-toolbar>
    <md-content id="main"></md-toolbar>
</div>

在我的控制器中，我注入了“$window”服务来获取“文档”对象上的钩子，从而更恰当地获取元素上的钩子：

angular
    .module('app')
    .controller('Controller', Controller);

Controller.$inject = ['$window', ...];

function Controller($window, ...) {
    var vm = this;
    vm.scrollToTop = scrollToTop;

    ...

    function scrollToTop(elementId) {
        $window.document.getElementById(elementId).scrollTop = 0;
    }

    ...
}
于 2015-03-31T17:57:43.833 回答