Docs

[instadesign]

Hi,

I’ve got this small but annoying problem. I’m utilising various anchor links on this site: tallspaghetti.co.uk

When clicked, they go to the right place, but then the footer loads and pushes everything up by the height of the footer.

I am using CloudFlare and WP Fastest Cache, however I have tried switching both off and various combinations of options for combining/not combining JS but I can’t seem to solve this. I’m wondering if there’s a way to force the footer to load before everything else, which should theoretically fix this?

Thanks,

Henry

[Rupok]

Hi Henry,

Sorry but I didn’t quite get your issue upon checking your site. Would you add a screencast to clarify this?

Thanks!

[instadesign]

Hi Rupok,

Sorry I should have given an example. From the homepage try hovering over ‘Mindfulness for the public’ in the nav menu and select the last link, ‘An experienced mindfulness teacher’. You should see that it’s an anchor link:

Mindfulness for the public overview

It links to an anchor towards the bottom of the page. However once the footer loads it pushes the page up so you’re no longer in the right place. Hopefully you’ll see what I mean, if not I’ll do a screencast.

Thanks,

Henry

[Lely]

Hi Henry,

Thank you for the clarification. Try adding the following code on Appearance > Customize > Custom > Edit Global JS:

jQuery(document).ready(function(){
   
   	if (window.location.hash=='#importance-of-an-experienced-mindfulness-teacher-public') { 
        var target = window.location.hash,
        jQuerytarget = jQuery(target);

        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top
        }, 900, 'swing');
	}

});

Hope this helps.

[Rad]

Hi there,

Thanks for posting in.

I do see some movement but it’s due to Essential Grid changing dimension as it loads. Once it changes and the scrolling happens, then positioning and destination will be different. Unfortunately, there is no another solution yet. You can try triggering the scroll effect only after the essential grid is loadied, but that will create a back and forth effect.

Would you mind providing your admin login credentials? This needs direct testing since I had to reload it which requires pre-adding javascript.

Thanks!

[instadesign]

Hi Lely, Rad,

So I seem to have two quite contradictory answers here…

First, I tried the jQuery code. It made the problem worse, with the page scrolling down, then up, then down again (the back and forth effect Rad is describing?)

Also even if we got that to work properly it’s not a great solution if I have to add that code for every anchor link…

Rad, I will send a separate private message with admin credentials. It hadn’t occurred to me it could be caused by EG… I had thought it was happening on pages without EG but actually I think you are right.

Thanks for your help both.

[instadesign]

This reply has been marked as private.

[Rad]

Hi there,

My changes won’t take effect, I placed the javascript in different areas to trigger it only after EG is loaded. But the javascript isn’t taking effect in the front.

Is it okay if I disable the CloudFlare plugin? And if your site is under CloudFlare’s service then please disable the Rocket Loader and set it on development mode.

Thanks!

[instadesign]

Hi Rad,

Yes of course, do whatever you need. I have now disabled rocket loader and paused CloudFlare altogether.

Thanks,

Henry

[Rad]

Hi there,

I added this code to your customizer’s custom javascript

jQuery ( function($) { 

function dont_scroll () {
$('html, body').stop().scrollTop(0);
}

dont_scroll();

$( window ).ready ( function() {

dont_scroll();
  
var hash = window.location.hash;

if ( hash !== "" ) {

$( 'html, body' ).stop().animate( { scrollTop : $( hash ).offset().top }, 500 );

}

} );

} );

It may behave differently on your view, and I left the cache plugins disabled so you could check it.

Thanks!

[instadesign]

Hi Rad,

Thanks for your efforts. No change on my end… has this fixed it for you?

[Rad]

Hi there,

Yes, it was, but now it’s random. I went ahead and added this code to EG’s custom javascript

jQuery ( function($) { 

var hash = window.location.hash;

if ( hash !== "" ) {

  setTimeout( function() { $( 'html, body' ).stop().animate( { scrollTop : $( hash ).offset().top }, 500 ); }, 2000 );

}

} );

Please check on your end, it varies on loading speed since the EG’s loading time isn’t the same as page’s loading. You may change the value 2000 (2seconds).

Thanks!

[instadesign]

Hi Rad,

Thank you for this, it seems to have worked as in the page ends up in the right place, but it kinda jumps about for a moment first – generally going to the correct place, then scrolling down, then scrolling back up again – to varying degrees in Chrome, Firefox and Safari. I’ve noticed it seems to be much worse once the browser has cached the page.

If we could somehow eliminate that it would be perfect!

Thanks,

Henry

[Rad]

Hi there,

What’s the use of this CSS?

.anchor {
  margin-top: -80px !important;
  padding-top: 80px !important;
}

It removes top space, but add another same size of space.

And I updated the code to this,

jQuery ( function($) { 

var hash = window.location.hash;
var scrollNow = false;

if ( hash !== "" ) {

var scroll_interval = setInterval ( function() {

if ( scrollNow ) {

$( 'html, body' ).stop().animate( { scrollTop : $( hash ).offset().top }, 500 );
clearInterval ( scroll_interval );
console.log('scrolled');
} else {

console.log('not scrolling');
$( 'html, body' ).stop();
$(window).scrollTop(0);

}

}, 100 );

setTimeout( function() { scrollNow = true; }, 2000 );

}

} );

Cheers!

[instadesign]

Hi Rad,

I’d forgotten about that! That’s what somebody had suggested to fix this issue in a very basic way, i.e. without changing the appearance have the anchor link compensate by 80px. I will now remove it and see how we go.

Thanks,

Henry

[Author]

Posts