CODEWITHSUNDEEP
jquerycsstwitter-bootstrapscrolltwitter-bootstrap-2
ryandawkins
ryandawkins

Reputation: 1545

Scrolling to the Bottom of a Bootstrap(2.3.2) Modal

Hello I am trying to scroll to the bottom of a bootstrap modal onclick. So far I haven't had any success but moving the back of the page around. Any ideas on what to do?

I've looked at: Autoscrolling a bootstrap modal on modal('show')
Twitter bootstrap scrollable modal

HTML

<div id="groupModal" class="modal fade">
    <div class="modal-footer">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="groupName"></h4>
    </div>
    <div class="modal-body">
        <div class="container-fluid">
            <div class="row-fluid">
            </div>
            <div id="interestedDiv" class="collapse">
                <form id="interestedForm">
                    <fieldset>
                        <legend>Interested Form</legend>
                        <input id="firstNameField" class="interestedField" type="text" placeholder="First Name" required>
                        <input id="lastNameField" class="interestedField" type="text" placeholder="Last Name" required>
                        <input id="emailField" class="interestedField" type="email" placeholder="Email" required>
                        <input id="phoneField" class="interestedField" type="tel" placeholder="Phone Number">
                        <button style="margin-bottom: 10px !important;" id="interestedSubmitButton" type="submit" class="btn btn-custom" disabled="true">Submit</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="pull-left">
            <a id="interestedBtn" href="#" data-toggle="collapse" data-target="#interestedDiv"><i id="chevron" class="icon-chevron-right"></i> I'm Interested!</a>
        </div>
        <!--        <a href="#" data-dismiss="modal" class="btn btn-custom">Close</a>-->
    </div>
</div>

Javascript:

$('#interestedBtn').click(function(event){
    if($('#interestedDiv').hasClass('in')) {
        $('#chevron').attr('class', 'icon-chevron-right');
    } else {
        $('#chevron').attr('class', 'icon-chevron-up');
        $('#firstNameField').focus();
        $('#groupModal').animate({
            scrollTop: $('#groupModal').position().top + $('#groupModal').height()
        });
    }
});

Upvotes: 2

Views: 3116

Answers (1)

vishalkin
vishalkin

Reputation: 1235

I did it without using javascript.

FIDDLE

HINT: add <a href="#"> <button /> </a>

Upvotes: 1

Related Questions