ScrollTop () not working after applying overflow values ​​with jQuery?

I'm using Chris Coyier's plugin (actually a modified version of Devin Sturgeon) to animate the scroll to the anchor links:

// Easing for links pointing to anchors
$(document).ready(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

      

It works fine until I apply overflow values ​​with jQuery. For example, after closing the modal window, this piece of code is responsible for hiding the horizontal overflow and setting the vertical overflow to auto:

$('.file-content a.close-reveal-modal').on('click', function() {
  $('html, body').css({
    'overflow-y' : 'auto',
    'overflow-x' : 'hidden'
  });
});

      

After applying these values, the plugin for scrolling animation on link anchors stops working, clicking on them does not produce any results. If I remove the code responsible for setting the overflow when closing the modal, Chris's plugin works like a charm every time.

Why is this happening?

Any help would be much appreciated!

+3


source to share


1 answer


I don't know if it helps you, but here is a hint I found: http://upshots.org/javascript/jquery-get-real-height-of-hidden-or-overflow-hidden-elements

Have you tried to debug it?



Because I suspect that in your example

target.offset().top
      

Run codeHide result


returns zero
+2


source







All Articles