javascript - 滚动到模态 div 中的元素

Question

我正在使用 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); 
});

上面的代码没有做任何事情。我可以在点击事件中发出警报，但它不会滚动。有什么想法吗？

参见 https://jsfiddle.net/z7m4c38d/3/ 的示例请注意，这个 fiddle 不使用 JQuery 加载，而是在 div 内修复了代码...问题仍然存在...

Answer 1

在您的点击事件中使用以下代码

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>&nbsp;</p>
                </td>
                <td class='cap_t3' width="208" valign="top">
                    <p>Ewing&rsquo;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">&nbsp;</td>
            </tr>
        </table>
                <div style = "height:500px;" >ok </div>
            <div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div>
    </div>
</div>