Question

我正在处理员工目录，该目录允许用户搜索员工并在树/组织结构图类型布局中显示有关员工的信息。我使用Google's Org Chart代码绘制图表。它会在<td>中显示每个员工的联系人卡片，其中的管理员和下属位于不同的<tr>之上或之下。输出看起来像这样：

如果员工拥有多个少数下属，则用户必须水平滚动才能全部查看。不是问题。

我的问题是，如果超过10个左右，您将完全忽视您搜索到的员工，并且必须向右滚动直至找到它们：

这似乎很烦人。我尝试将<a name="anchor">放入卡中并在页面加载时跳转到它，但它只滚动到足够几乎将其放在屏幕上。

理想情况下，它会使卡片居中，将其放在用户的焦点上。

当网页加载时，有没有办法直接跳转到相关员工？

如果有帮助，请参阅以下单个卡片的代码段：

<td>
    <h1>Mike</h1>
    <div class="cardBody">
        <img src="Images/stock1.jpg" style="float:left; margin-right:5px;" /> 
        <table class="data" cellpadding="0">
            <tr>
                <td><i class="fa fa-briefcase"></i></td>
                <td><span style="color:red;">President</span></td>
            </tr>
            <tr>
                <td><i class="fa fa-building"></i></td>
                <td>Administration</td>
            </tr>
            <tr>
                <td><i class="fa fa-globe"></i></td>
                <td>Home Office</td>
            </tr>
            <tr>
                <td><i class="fa fa-phone"></i></td>
                <td>Ext. 2402</td>
            </tr>
            <tr>
                <td><i class="fa fa-envelope"></i></td>
                <td><a href="mailto:email@address.com">Send Email</a></td>
            </tr>
        </table>
    </div>
</td>

Answer 1

对你尝试过的东西有点困惑。 jQuery适合你吗？如果是这样，this solution似乎很简单。

$(container).scrollTo(target);

现在，如果你能通过你的＆＃34;目标＆＃34;通过网址查询。您应该能够解析并使用它：

注意：这假设您有一个网址，例如www.website/searchpage.html?i=targetID

此外：这是设置为使用ID，因此如果您需要使用类，请更改代码。

var params;    
function parseURLParams(url) {
        var queryStart = url.indexOf("?") + 1,
            queryEnd = url.indexOf("#") + 1 || url.length + 1,
            query = url.slice(queryStart, queryEnd - 1),
            pairs = query.replace(/\+/g, " ").split("&"),
            parms = {}, i, n, v, nv;

        if (query === url || query === "") {
            return;
        }

        for (i = 0; i < pairs.length; i++) {
            nv = pairs[i].split("=");
            n = decodeURIComponent(nv[0]);
            v = decodeURIComponent(nv[1]);

            if (!parms.hasOwnProperty(n)) {
                parms[n] = [];
            }

            parms[n].push(nv.length === 2 ? v : null);
        }
        return parms;
    }

$(document).ready(function(){
   params = parseURLParams(window.location.href);
   $("#Container").scrollTo("#"+params.i);
});

希望这有助于某人。

编辑：我意识到你希望它集中在一起，这将是一个有点棘手的问题。你需要你的容器要比容纳所有数据所需的容量大得多（或无限？），然后滚动到所需元素的位置，再加上容器一半的偏移量＆＃39;可以看到宽度和元素宽度的一半。在计算此数字时，可能只想创建一个具有绝对位置的不可见元素。然后将元素移动到此位置，最后将屏幕移动到此元素。

Answer 2

您可以附加网址，以便跳转到具有特定ID的div。例如，在您发布的卡片代码中，您将div更改为：

<div class="cardBody" id="mikeCard">

然后将指向页面的链接更改为

<a href="employees.html#mikeCard">Link to page with Mike's card centered</a>

或者如果您想从同一页面链接到该部分，只需执行

<a href="#mikeCard">Jump to Mike's card</a>

在窗口中居中动态生成的表格单元格

2 个答案: