Scroll to Top of Bootstrap Modal / Panels

When opening a Boostrap Modal Window (or switching Boostrap Panels) and you scrolled the content previously, it will retain the position. Here are two methods to scroll the content back to the top after opening the modal again.

There was change in boostrap where you need to use: on shown.bs.modal or use a function call.

<div id="HelpScreenModal" class="modal fade" role="dialog">
    <div id="HelpDialog" class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 id="HelpScreenModalTitle" class="modal-title"></h4>
            </div>
            <div id="HelpScreenModalContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
//call a function when you show the modal window (I opted for this method)
<button onclick="showSMSSummary(); return false;" data-toggle="tooltip" title="Click To iew Summary" class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{    
     $('#HelpScreenModal').modal('show');            
     $('#HelpScreenModalContent').animate({ scrollTop: 0 }, 'fast');
 }

 

HTML Page Transitions / Animiations

While developing a hybrid mobile app with DevExtreme I was looking for other options for full page transitions. I first looked at jQuery Mobile but the routing engine in jQuery Mobile conflicted with the routing engine.
 
The example below uses Bootstrap for styling, Animate.css for full page transitions and smoothState.js. The demo navigates between Home and an About Page. These are two pages, not one page with two DIVs.
 
Run Live Demo  -  Source code for this example: download the source - Animate.zip (13.9KB).

Boostrap Panels

Example for Copy / Paste Purposes.