滚动到模态div中的元素

Question

我正在使用JQuery load()将页面放入一个模态div设置为overflow-y:auto; 在模态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中修复了代码...问题仍然存在......

Answer 1

仅使用 JavaScript 的最新解决方案：

var element = document.getElementById("scroll-here")
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 2

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

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>