Question

对于我的项目，我有一个巨大的多级菜单，浮动在移动页面的左侧。我正在寻找一种方法将菜单中单击的级别滚动到菜单的div的顶部，但是我无法获得相对于菜单的子项的偏移量，以便将div滚动到该点。

我已经把我遇到的问题放在一起，你可以在这里看到：

由于offset（）获取元素相对于窗口的位置，因此我只能获得从窗口到元素的距离。使用position也不起作用，因为已在可查看区域之外滚动的元素返回负数，因此遍历dom并获得总位置（）偏移也不起作用。

我该如何使这项工作？我需要一种方法来查找菜单div顶部的距离（以像素为单位），并且完全忽略了浏览器窗口位置所点击的项目顶部。

这个小提琴只设置了一些示例代码来演示问题。如果任何人需要特定的引用，我的实际DOM就像使用angular一样设置：

<div data-ng-controller="MenuController">

    <script type="text/ng-template" id="menu_item_renderer.html">
        <span class="menu-item">
            <a ng-show="category.link" href="{{category.link}}" class="menu-item-title">
                {{category.title}}
            </a>
            <span ng-show="!category.link" class="menu-item-title">
                {{category.title}}
            </span>
            <span class="menu-toggle-btn"><i class="icon-plus" /></span>
        </span>
        <ul class="menu-category-list list-unstyled">
            <li data-ng-repeat="category in filtered = (category.categories | linkFilter:selectedFilters:searchTerm)" data-ng-class="hasChildren()" data-ng-include="'menu_item_renderer.html'" class="menu-category"></li>
        </ul>
        <ul class="menu-link-list list-unstyled">
            <li data-ng-repeat="link in filtered = (category.links | linkFilter:selectedFilters:searchTerm)" class="menu-link">
                <span class="menu-item">
                    <a href="{{link.link}}" class="menu-item-title">{{link.title}}</a>
                </span>
            </li>
        </ul>
    </script>

    <div id="global-menu" class="menu ng-cloak" data-features="globalMenu">
        <div id="global-menu-tools">
            <div id="global-menu-search">
                <label>Search</label><br>
                <input type="text" data-ng-model="searchTerm" />
            </div>

            <div id="global-menu-filters">
                <label>Filters</label>
                <div class="filter" data-ng-repeat="filter in menu.filters">
                    <label>{{filter.title}}</label>
                    <input type="checkbox" data-ng-click="setSelectedFilter()" />
                </div>
            </div>

        </div>
        <ul class="menu-categories list-unstyled">
            <li class="menu-category" data-ng-repeat="category in menu.categories" data-ng-include="'menu_item_renderer.html'"  data-on-finish-render></li>
        </ul>
    </div>
</div>

Answer 1

您还需要考虑#menu scrollTop位置：

jsFiddle

$("#menu").animate({scrollTop: $("#menu").scrollTop() + $(this).position().top});

与以下内容相同：

$("#menu").animate({scrollTop: "+="+ $(this).position().top});

将Div滚动到Child相对于自身的偏移量

1 个答案: