Search code examples
jqueryjquery-pluginstwitter-bootstrap-3bootstrap-modalsmooth-scrolling

Twitter Bootstrap 3: Click link in modal window, close it and smooth scroll to hash


I'm using the jQuery One Page Navigation plugin Git link and Twitter Bootstrap 3.3. Everything works fine except one thing: additional links in modal window doesn't work with smooth scroll effect.

I've found this solution for inline links:

function scrollNav() {            
    $('#program_scroll a, #closemodal a').click(function(evn){
        evn.preventDefault();
        $('html,body').scrollTo(this.hash, this.hash);        
    }); 
}

My jQuery skills are limited so I haven't found the solution for this issue. Here is the live website: website

The problem is happening in section called News - once the modal window is opened - three links in the end of text are displayed. I want that once those links are clicked the modal window closes and page is scrolled to hash'ed content

This is the code which closes the modal window:

<script type="text/javascript">   
   $('.closemodal').click(function() {                                
        $('#myModal').modal('hide');
   });                                        
</script>

The script is placed in index.js file and called by function scrollNav() {and inline JS placed in index.html:

$('#myModal').on('hidden.bs.modal', function (evn) {           
   evn.preventDefault();
   $('html,body').scrollTo(this.hash, this.hash);  
});

As I understand the $('#myModal').on('hidden.bs.modal', function (evn) { doesn't receive the hash of clicked link


Solution

  • <script type="text/javascript">   
      $('.closemodal').click(function() {   
      $('#myModal').modal('hide');   
      $('html,body').scrollTo(this.hash, this.hash);
      });   
    </script>
    

    Very strange, firstly once I've tried this code - there was no any effect :/