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!
source to share
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
returns zerosource to share