Scroll to element in modal div

Question

I'm using JQuery load() to place a page into a modal div set to overflow-y:auto; At the top of the loaded page inside the modal div, I want to click on an element (actually a table cell...) that will scroll the page down to a specific div:

<div id='haematopoietic_section' class='cap_h2'>Haematopoietic</div>

The code in the loaded page contains:

$('#haematopoietic').click(function(){
$(document).scrollTop($('#haematopoietic_section').offset().top); 
});

The above code isn't doing anything. I can throw an alert in the click event, but it won't scroll. Any ideas?

See example at https://jsfiddle.net/z7m4c38d/3/ Note that this fiddle does not use JQuery load, but instead has code fixed inside the div...problem remains...

Answer 1

use the below code, in your click event

var container = $('body'),
    scrollTo = $('#haematopoietic_section');

container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);

Since the div is contained in <div id = 'cap_module_holder'> .... </div> so your container variable should be:

var container = $('#cap_module_holder');

i have added an extra div in middle to increase height so that you can see the scroll effect.

<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>

Answer 2

A more recent solution using only JavaScript:

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

See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 3

Late to the party here, but I am posting this in the hopes that it helps someone else who is beating their heads against the wall about scrolling inside modals.

In my case I had multiple modals that could be opened (but just one at a time), and within each modal was a form that needed to be validated on submission. I wanted it to scroll to the first invalid form input on submission.

The key thing here is that you want to scroll the contents inside the modal, not the page behind the modal, nor the position of the modal itself against the background page. So to do this you need to do the following:

1) Structure your modals correctly. Put an id into the div that has the class='modal fade' and then make sure the 'modal-body' has its own id, in this case 'newExpenseForm18'. (note I use a 'key' attribute to tell me which modal is open).

<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) Now you need to get three ids: the whole modal ( in this case "uploadExpense18"), the container div ( in this case "theform18"), and the target div to which you want to scroll, in this case "myExpense18". You can get these thus:

var modalId   = $('.modal:visible').attr('id');
var key       = $('.modal:visible').attr('key');
var bodyId    = 'newExpenseForm'+key;
var targetId  = 'myExpense'+key;

3) Now you find out the distance you need to scroll. To do this, find the offset of the target div, relative to the top of the page, and also the offset of the modal-body, relative to the top of the page

var position = $('#'+targetId).offset().top;
var position2 = $('#'+bodyId).offset().top;

4) subtract one from the other to get the offset of the target relative to the container div.

var distance = position-position2;

5) and, finally, scroll the body of the modal inside the modal div, so that the target is now at the place where the top of the container used to be:

$('#'+modalId).animate({    scrollTop: distance }, "slow");

Hope that helps someone!