Question

我正在尝试使用animate函数滚动到表的特定行。当可滚动div位于顶部时，它工作正常，但是当我从顶部滚动时，它只能看到它看起来可见的顶部。

我在对话框（Bootstrap Modal窗口）中使用它。有没有办法从div的顶部获得距离而不仅仅是可见的？

下面的HTML代码是asp.net mvc4 Partial Class的一部分，它进入Bootstrap Modal窗口（对话框）：

     <div id="LocationNumberModalAllLocations" style="Margin-top: -9px">
      <div class="container">
       <div class="row row-eq-height">
        <div class="col-sm-12 col-md-4">
         <div id="LocationNumberModalAllLocationsSelectionContainer"     class="ModalResultsTable">
          <table id="locationList" class="table table-hover table-condensed">
           <thead>
             <tr>
               <th>Location</th>
               <th>Items</th>
             </tr>
           </thead>
           <tbody>
           </tbody> 
          </table>
        </div>
      </div>
     <div class="col-sm-12 col-md-8 modalTableColumnCanvas">
     <center><div id="control" style="Margin:-11px 0 5px 0">
        Go to location: <input type="text" size="10" id="GoToLocationInput"  /> <button onclick='gotoLocation()'> Go </button>
    </div></center>
       <div class="modalTableCanvas">
       <div class="ModalSelectedTable">       
       <center><h4>Selected Location's Inventory</h4></center>
       </div>
       <table class="table table-hover table-condensed">
         <thead>
           <tr>
             <th>Part Number</th>
             <th>Condition</th>
             <th>Quantity</th>
           </tr>
         </thead>
       <tbody>
       </tbody> 
     </table>
     </div>
    </div>
  </div>
  </div>
</div>

这是我的jquery代码。

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

示例： jsfiddle.net/eaglei22/vgutew90

Answer 1

对我来说，这似乎是一个有效的解决方案，我不知道它是否是最好的，但它似乎很快，并且我需要它。这是新的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);
    }
}

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

使用scrollTop：tableRow.offset（）。在可滚动div内部，仅显示距可见顶部的距离

1 个答案: