我正在使用JQuery load（）将页面放入设置为overflow-y:auto;的模态div中在模态div内部加载页面的顶部，我想点击一个元素（实际上是一个表格单元格） ...）将页面向下滚动到特定的div：
<div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div>
加载页面中的代码包含：
$('#haematopoietic').click(function(){
$(document).scrollTop($('#haematopoietic_section').offset().top);
});
上面的代码没有做任何事情。我可以在click事件中发出警报，但不会滚动。有什么想法吗？
请参阅https://jsfiddle.net/z7m4c38d/3/的示例请注意，这个小提琴不使用JQuery加载，而是在div中修复了代码...问题仍然存在......
答案 0 :(得分：5)
在点击事件中使用以下代码
var container = $('body'),
scrollTo = $('#haematopoietic_section');
container.scrollTop(
scrollTo.offset().top - container.offset().top + container.scrollTop()
);
由于div包含在<div id = 'cap_module_holder'> .... </div>中
所以你的容器变量应该是：
var container = $('#cap_module_holder');
我在中间添加了一个额外的div以增加高度，以便您可以看到滚动效果。
<div id='module_container'>
<div id='cap_module_holder'>
<p class='cap_h1'>Bone Tumours</p>
<p>Introduction</p>
<p>
<br>In the first three decades of life, benign tumours are the most frequent. In the elderly, a bone tumour is likely to be malignant, either primary or a metastasis.</p>
<p class='cap_h2'>Primary tumours involving bone</p>
<p>These are all derived from tissue of mesodermal origin.</p>
<table width="auto" border="0" align="center" cellspacing="3">
<tr>
<td width="208" valign="top">
<p align="center"><strong>Histological classification</strong>
</p>
</td>
<td width="208" valign="top">
<p align="center"><strong>Benign</strong>
</p>
</td>
<td width="208" valign="top">
<p align="center"><strong>Malignant</strong>
</p>
</td>
</tr>
<tr>
<td id='haematopoietic' class='cap_t2' width="208" valign="top">
<p>Haematopoietic</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Haemangioma</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Myeloma
<br>Malignant lymphoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Chondrogenic</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Osteochondroma
<br>Chondroma
<br>Chondromyxoid fibroma</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Chondrosarcoma
<br>Dedifferentiated -Chondroblastoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Osteogenic</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p> Osteoma Osteoid osteoma
<br>Osteoblastoma</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Osteosarcoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Fibrogenic</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Fibrous cortical defect
<br>Non-ossifying fibroma</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Fibrosarcoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Neuroectodermal</p>
</td>
<td width="208" valign="top">
<p> </p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Ewing’s sarcoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Notochordial</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Benign notochordal cell tumour </p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Chordoma</p>
</td>
</tr>
<tr>
<td class='cap_t2' width="208" valign="top">
<p>Odontogenic</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Giant cell tumour</p>
</td>
<td class='cap_t3' width="208" valign="top">
<p>Ameloblastoma
<br>
</p>
</td>
</tr>
<tr>
<td class='cap_t2' valign="top">Unknown origin</td>
<td class='cap_t3' valign="top">Unicameral cyst
<br>Aneurysmal bone cyst</td>
<td valign="top"> </td>
</tr>
</table>
<div style = "height:500px;" >ok </div>
<div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div>
</div>
</div>
答案 1 :(得分：1)
仅使用JavaScript的最新解决方案：
async myFunction()
{
this.spinner.show();
await showSpinner2();
this.spinner.hide();
}
showSpinner2()
{
let i;
for(i=2; i<100; i++) {
this.numbers.push(i);
}
alert(i);
}
请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
答案 2 :(得分：0)
晚些时候在这里参加聚会，但我发布此消息的目的是希望它可以帮助其他人在墙上摇动头部以进行内部模态滚动。
在我的情况下，我有多个可以打开的模式（但一次只能打开一个），并且在每个模式内都有一个表单，需要在提交时进行验证。我希望它滚动到提交时输入的第一个无效表单。
这里的关键是要滚动模式内的内容，而不是模式后面的页面，也不希望滚动模式本身相对于背景页面的位置。因此，您需要执行以下操作：
1）正确构造模态。将一个id放入具有class =“ modal fade”的div中，然后确保“ modal-body”具有自己的id，在本例中为“ newExpenseForm18”。 （请注意，我使用'key'属性来告诉我哪个模态是打开的。）
<div class="modal fade uploadExpense in" key="18" id="uploadExpense18" role="dialog" >
<div class="modal-dialog text-left">
<div class="modal-content" id="modalcontent18">
<div class="modal-header">
</div>
<div class="modal-body" id="newExpenseForm18">
..... etc followed by (at some point)
<div id = 'myExpense18'>
..... etc
2）现在，您需要获取三个id：整个模式（在这种情况下为“ uploadExpense18”），容器div（在此情况下为“ theform18”）和要滚动到的目标div案例“ myExpense18”。您可以这样获得它们：
var modalId = $('.modal:visible').attr('id');
var key = $('.modal:visible').attr('key');
var bodyId = 'newExpenseForm'+key;
var targetId = 'myExpense'+key;
3）现在，您找到了需要滚动的距离。为此，请找到目标div相对于页面顶部的偏移量，以及模态主体相对于页面顶部的偏移量
var position = $('#'+targetId).offset().top;
var position2 = $('#'+bodyId).offset().top;
4）从另一个中减去一个以获得目标相对于容器div的偏移量。
var distance = position-position2;
5），最后，在模式div内滚动模式的主体，以使目标现在位于容器顶部曾经是的位置：
$('#'+modalId).animate({ scrollTop: distance }, "slow");
希望对某人有帮助！