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

Question

我正在开发一个员工目录，该目录允许用户搜索员工并在树/组织图类型布局中显示有关他们的信息。我正在使用Google's Org Chart 代码来绘制图表。它在<td> 中显示每个员工的联系人卡片，其上方或下方的经理和下属在不同的<tr> 中显示。输出如下所示：

如果员工有多个下属，用户必须水平滚动才能看到所有下属。没问题。

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

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

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

有没有办法在页面加载时直接跳转到相关员工？

如果有帮助，这里有一个代码 sn-p，用于显示单个卡的外观：

<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);

现在，如果您可以通过 url 查询传递您的“目标”。您应该能够像这样解析和使用它：

注意：这假设您有一个类似 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);
});

希望这对某人有所帮助。

编辑： 我意识到你希望它居中，这会有点棘手。您将需要您的容器比它所需的更大（或无限？）以适应所有数据，然后滚动到所需元素的位置，加上容器可视宽度一半的偏移量，并且元素宽度的一半。计算此数字时，可能只想创建一个具有绝对位置的不可见元素。然后将元素移动到这个位置，最后将屏幕移动到这个元素。

Answer 2

您可以附加 URL，以便它跳转到具有特定 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>