1

我正在一个项目中使用 ng-repeat 和 ng-filter 的组合来浏览一系列内容。用户单击导航链接后，页面过滤器会更新以添加更多内容，并且视口应滚动到下一个锚点。这是一个例子：

导航

<li class="nav"><a href="#first-section" id="first-link">First Section</a></li>
<li class="nav"><a href="#second-section" id="second-link">Second Section</a></li>
<li class="nav"><a href="#third-section" id="third-link">Third Section</a></li>

控制器

$('li.nav').click(function (event) {
    var navId = event.target.id; //Get ID of clicked link
    switch (navId) {
        case 'first-link':
            $scope.Filter = { type: 'first-section' }; //Set ng-filter "Filter" to only show content from first section.
            $('html, body').animate({
                scrollTop: $("#first-section").offset().top //Scroll to first section.
            }, 2000);
            break;
        case 'second-link': //Second verse, same as the first.
            $scope.Filter = { type: 'second-section' }; //The 2nd section also includes section 1, so that a user can scroll back up.
            $('html, body').animate({
                scrollTop: $("#Evolution").offset().top
            }, 2000);
            break;
    };
});

请注意，第二个过滤器还包括第一个过滤器的内容（我希望用户能够向上滚动页面。对于页面上尚不存在的元素，风会立即跳到 ng-repeat 元素（没有滚动）如果元素已经出现在页面上（例如，如果用户在第三部分并点击返回到第一部分）滚动工作正常。

问题：我是否可以更新 scrollTop 以便在 ng-filter 触发后重新计算页面上元素的位置？

为什么要重复？该网站内容繁重，我正在寻找可以以 AJAX-y 方式加载的内容，但也允许用户搜索内容（此处未显示第二个过滤器）。

4

0 回答 0