Javascript 滚动至模态div中的元素
我使用jQueryLoad（）将页面放入模式div中，设置为Javascript 滚动至模态div中的元素,javascript,jquery,Javascript,Jquery,我使用jQueryLoad（）将页面放入模式div中，设置为overflow-y:auto在modal div内加载页面的顶部，我想单击一个元素（实际上是一个表格单元格…），该元素会将页面向下滚动到特定div： <div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div> 上面的代码没有任何作用。我可以在单击事件中抛出警报，但它不会滚动。有什么想法吗 请参见注释中的示例，此fiddle不使用JQ
overflow-y:auto<div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div>
请参见注释中的示例，此fiddle不使用JQuery load，而是在div中修复了代码。问题仍然存在…在单击事件中使用以下代码
var container = $('body'),
scrollTo = $('#haematopoietic_section');
container.scrollTop(
scrollTo.offset().top - container.offset().top + container.scrollTop()
);
中
因此，容器变量应为：
var container=$（'cap#u 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>
骨肿瘤
导言
在生命的前三十年，良性肿瘤是最常见的。在老年人中，骨肿瘤可能是恶性的，无论是原发性还是转移性
原发性骨肿瘤
这些都来源于中胚层组织
组织学分类
良性
恶性
造血的
血管瘤
骨髓瘤
恶性淋巴瘤
软骨形成
骨软骨瘤
软骨瘤
软骨粘液样纤维瘤
软骨肉瘤
去分化软骨母细胞瘤
成骨
骨瘤骨样骨瘤
成骨细胞瘤
骨肉瘤
纤维化
纤维皮质缺损
非骨化性纤维瘤
纤维肉瘤
神经外胚层
尤因；s肉瘤
脊索
良性脊索细胞瘤
脊索瘤
牙源性
巨细胞瘤
成釉细胞瘤
来历不明
单房囊肿
动脉瘤性骨囊肿
好啊
造血的
这里的聚会迟到了，但我之所以发布这篇文章，是希望它能帮助那些在情态动词内部滚动的人
在我的例子中，我有多个模态可以打开（但一次只能打开一个），每个模态中都有一个表单，需要在提交时进行验证。我希望它在提交时滚动到第一个无效表单输入
这里的关键是，您希望滚动模态内部的内容，而不是模态后面的页面，也不是模态本身相对于背景页面的位置。为此，您需要执行以下操作：
1） 正确构造情态动词。将id放入具有class='modal fade'的div中，然后确保'modal body'具有自己的id，在本例中为'newExpenseForm18'。（注意，我使用“key”属性来告诉我哪个模态是打开的）
3） 现在，您可以找到需要滚动的距离。为此，请查找目标div相对于页面顶部的偏移量，以及模态主体相对于页面顶部的偏移量
var position = $('#'+targetId).offset().top;
var position2 = $('#'+bodyId).offset().top;
4） 从另一个中减去一个以获得目标相对于容器div的偏移量
var distance = position-position2;
5） 最后，在modal div中滚动modal的主体，使目标现在位于容器顶部以前所在的位置：
$('#'+modalId).animate({ scrollTop: distance }, "slow");
希望这对别人有帮助 仅使用JavaScript的较新解决方案：
var element = document.getElementById("scroll-here")
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
请参见$（窗口）。请改为使用滚动顶（…）
。请尝试，但是不行。不确定window是否是正确的对象，因为问题是关于在模式中滚动。那么你能提供一个你正在做什么的最小工作示例吗？@RickViscomi这是正确的，但OP希望文档被滚动，这个问题有点混乱。我已经将其放入上面链接上的单击事件中，仍然不起作用浏览器控制台中的错误消息是什么<代码>容器
var distance = position-position2;
$('#'+modalId).animate({ scrollTop: distance }, "slow");
var element = document.getElementById("scroll-here")
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })