I opened this thread, but didn’t realise it was answered, and the thread has closed:
I have used the code RueNel gave, and now it jumps above the section by around the same as it was jumping below.
Is there any way to further customise this?
Hello There,
Thanks for writing in! Please have the code updated and use this:
(function($){
$ ( document ).ready( function() {
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 80 });
} );
}, 500 );
});
})(jQuery);
You might need to adjust by increasing or reducing the 80.
Hope this helps. Please let us know how it goes.
HI there,
Thanks for this.
It works well for desktop view (with 80 changed to 110), however on Tablet/Mobile it’s quite off.
Is there a way to fix it for different resolutions?
Hi There,
Please change the provided code to this:
(function($){
$ ( document ).ready( function() {
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click touchend', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 110 });
} );
}, 500 );
});
})(jQuery);
Let us know how it goes!
I have updated to this code, changing -110 to -90 gets it to size correctly on desktop, but I can’t see how to change it for tablet/mobile. The header is a different size when it breaks and the code doesn’t seem to accommodate this?
Thanks in advance - Jade
Hi there,
Unfortunately, there is no bulletproof solution at the time being regarding the one-page navigation in the Pro theme. We can not fix the mobile as it has a different height and actually the whole problem is that the header builder functionality of the theme is complex enough that in some cases it is not possible to calculate the correct height in the proper viewport.
Our development team is already aware of this problem and they are working to have a refactor in the code to support the functionality.
At the moment you need to live with this temporary solution on the desktop to have a real fix in upcoming releases.
Thank you for your understanding and patience.
OK, makes sense.
I can live with the mobile issue, but am having troubles on desktop.
The code provided works great on the homepage desktop view. I also have anchors on another page that are completely off though. Is it a page by page thing?
eg http://peoplecentral.flickdigital.co/professional-groups/#management
Hi There,
The entire issue is related to One Page navigation that is not available yet on Pro. Using hash links, it will scroll to specific section but the height of the fixed navigation bar is not taken into consideration hence the content hides behind it. The code provided will work on links when click on the same page but not when hash is loaded via URL. Try this:
(function($){
$ ( document ).ready( function() {
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click touchend', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 90 });
} );
//For hash link
var hash = location.href.split("#").slice(-1)[0];
var outbound = /^https?:///i;
var $adminbarHeight = $('#wpadminbar').outerHeight();
if( hash && !outbound.test( hash ) ) {
$('html, body').stop().animate({ scrollTop : $('#'+hash).offset().top - 90 });
}
}, 500 );
});
})(jQuery);
Note that this fixed is temporary and will not work on all case especially if you want to use the Shrink option for header. Since the code manually set the height, it cannot predict the height of the header when shrink to certain size accordingly. See this implementation: https://screencast-o-matic.com/watch/cFVereoeoU
Hope this helps.
Thanks so much for this.
I don’t really have to use any same page anchors, but I do really need to work out how to get the hash anchors to align properly, but cannot work out which part of this code to change?
Hello There,
Please update the code one last time and use this:
jQuery ( document ).ready( function($) {
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-bar-fixed').outerHeight() });
} );
}, 500 );
});
Hope this helps. Please let us know how it goes.
It jumps to about 110 pixels below the top of the section with the anchor ID.
I have a menu that reduces by 2 sections (top-bar and sub-menu) on scroll-down. Can I edit the code to allow for this?
Thanks in advance - Jade
Hi,
Please change the code to this.
jQuery ( document ).ready( function($) {
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 90 });
} );
}, 500 );
});
You may change 90 to adjust.
Hope that helps.
1 Like
HI, I’ve tried numbers from 10 to 200 and it doesn’t seem to make any difference at all?
http://peoplecentral.flickdigital.co/professional-groups/#management
Thanks in advance - Jade
Hello There,
We will change the trigger event of the code from docoment ready to window load. Please use this:
(function($){
$(window).on('load resize', function(){
setTimeout ( function() {
$('.x-anchor.x-anchor-button[href*="#"]').off();
$(document).on('click', '.x-anchor.x-anchor-button[href*="#"]', function(e) {
e.preventDefault();
console.log( $(this).attr('href') );
var hash = '#' + $(this).attr('href').split('#')[1];
if ( hash == '#' ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 90 });
} );
}, 500 );
});
})(jQuery);
Hope this helps. Please let us know how it goes.
Thanks, but same result - nothing changes, no matter what value I put for -90.
Hi there,
Are you referring from home-page linking to another page (eg. http://peoplecentral.flickdigital.co/professional-groups/#management from the home page ) ? That’s how I see it and it’s a different issue, it should be trigger upon page load and not by clicking the button. The home page has no connection with the other page, you’re simply linking it.
You need another code something like this,
(function($){
$( document ).ready( function(){
setTimeout ( function() {
var hash = window.location.hash
if ( hash == '#' || hash == "" || hash == null || hash == undefined ) return false;
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 90 });
}, 1000 );
});
})(jQuery);
You need to replace the existing one, just append it since it’s a different issue.
Thanks!
Thanks @Rad - this has sorted it on desktop!
Is there a way to have a different scrollTop setting on tablet/mobile?
Hello There,
Thanks for updating in! Do you want to re position the scroll to top button in tablet or mobile screens? If that is the case, please use this custom css code:
@media(max-width: 1200px){
.x-scroll-top.right {
left: 10px;
right: auto;
}
}
If you just simply want to adjust when the scroll to top button will show up, please go to X > Launch > Options > Miscellaneous and change the “When to display Scroll To Top Anchor” value to at least 30% or lower.
Hope this helps.
No, this is about having hash links to other pages align correctly.
The code @Rad provided above works great on desktop. I’m wondering if it can be expanded on to adjust for tablet/mobile as well.
Thanks in advance - Jade
Hello There,
We can place a condition in the code so that it will behave different in desktop or mobile screen. Please update the code and use this:
(function($){
$( document ).ready( function(){
setTimeout ( function() {
var hash = window.location.hash
if ( hash == '#' || hash == "" || hash == null || hash == undefined ) return false;
if ( $(window).width() > 767 ) {
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 90 });
} else {
$('html, body').stop().animate({ scrollTop : $(hash).offset().top - 30 });
}
}, 1000 );
});
})(jQuery);
Hope this helps. Kindly let us know.