Javascript 使用scrollTop:tableRow.offset（）.top在可滚动的div内，仅显示与'；可见

我正在尝试使用动画功能滚动到表的特定行。当可滚动div位于其顶部时，它工作得很好，但是当我从顶部滚动时，它只能得到看起来可见的顶部

我在对话框（引导模式窗口）中使用它。是否有一种方法可以获得从div顶部到可见部分的距离

下面的HTML代码是进入引导模式窗口（对话框）的asp.net mvc4部分类的一部分：

样本：

---

jsfiddle.net/eaglei22/vgutew90这对我来说似乎是一个有效的解决方案，我不知道它是否是最好的，但它看起来很快，并且做了我需要的事情。以下是新的Javascript：

function gotoLocation() {

    //check if value exists
    var tableOfLocations = $('#locationList');
    var location = $('#GoToLocationInput').val().trim().toUpperCase();


    if($("#Active").length)
    {
        var textVal = $("#Active").children().eq(0).text();
        if( textVal == location)
        {
          return;
        }
    }
    //remove old active row
    var tableRow = $('#locationList tbody').find('tr').removeAttr("id");
    tableRow.removeAttr("style");

    var tableRow = $('#locationList tbody tr td').filter(function () {
        return $(this).text().toUpperCase() == location;
    }).parent();

    tableRow.attr("id","Active");
    tableRow.css({'background-color': '#e8e8e8'});

    if (tableRow.length) {
        var container = $('#LocationNumberModalAllLocationsSelectionContainer');
        var height = container.height();
        container.scrollTop(0);
        var tableRowPosition = tableRow.offset().top;
        container.animate({ scrollTop: tableRowPosition - (height/1.5) }, 500);
    }
}

---

如果请求与上次选择的值相同的值，则不会发生任何事情。如果请求一个新的值，表将从顶部滚动到匹配的行

您也可以发布您的HTML吗？@obsidiane好的，我发布了与该函数一起使用的HTML。完全按照原样复制您的代码会给我

gotoLocation没有定义。您是否遇到相同的错误？不，我不明白，让我看看是否可以组合一个JSFIDLE。顺便说一句，我确实找到了某种解决方案，首先将div置于顶部，如container.scrollTop（0）。。在定义tableRowPosition之前调用该函数。缺点是即使它已经在该位置，它也会从顶部向后滚动到该位置。这是一个不错的解决方案，我可能只需要添加一些检查，看看输入是否与当前表值匹配。。但我仍然想知道为什么会有这样的反应。@Obsidiase这就是我的例子。如果你尝试去99，然后去50，你会看到它只是卷回顶部时，试图去50。这是因为第二次尝试时offset.top值非常小，这让我相信它只是从屏幕上显示的div的顶部抓取它。我的解决方案确实解决了这个问题，但似乎不是最好的解决方案。有什么想法吗？谢谢
function gotoLocation() {

    //check if value exists
    var tableOfLocations = $('#locationList');
    var location = $('#GoToLocationInput').val();
    var tableRow = $('#locationList tbody tr td').filter(function () {
        return $(this).text() == location;
    });

    if (tableRow.length) {
        var container =   $('#LocationNumberModalAllLocationsSelectionContainer');
        var height = container.height();
        var tableRowPosition = tableRow.offset().top;
        container.animate({ scrollTop: tableRowPosition - (height / 2) }, 1000);
    }
}

function gotoLocation() {

    //check if value exists
    var tableOfLocations = $('#locationList');
    var location = $('#GoToLocationInput').val().trim().toUpperCase();


    if($("#Active").length)
    {
        var textVal = $("#Active").children().eq(0).text();
        if( textVal == location)
        {
          return;
        }
    }
    //remove old active row
    var tableRow = $('#locationList tbody').find('tr').removeAttr("id");
    tableRow.removeAttr("style");

    var tableRow = $('#locationList tbody tr td').filter(function () {
        return $(this).text().toUpperCase() == location;
    }).parent();

    tableRow.attr("id","Active");
    tableRow.css({'background-color': '#e8e8e8'});

    if (tableRow.length) {
        var container = $('#LocationNumberModalAllLocationsSelectionContainer');
        var height = container.height();
        container.scrollTop(0);
        var tableRowPosition = tableRow.offset().top;
        container.animate({ scrollTop: tableRowPosition - (height/1.5) }, 500);
    }
}