-
Posts
-
I have set my header not to resize, and now when I go to an internal link (#my_anchor) it jumps too far and the anchor position is under the header.
Hey lunatrix,
Please try adding this at the very end of your themes / child themes functions.php file:
// Scroll to div function scrollToDiv(){ ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } }); }); </script> <?php } add_action('wp_head', 'scrollToDiv');If yous till have any issues Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayHi,
I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?
The user role for the account you send us should be set to ‘administrator’ so we can try to disable all plugins and add custom code (if necessary) to resolve the issue.
In the code provided earlier please replace the below line
menu = jQuery('a[href^="#"]');with
menu = jQuery('a');Best regards,
VinayHi Vinay,
Sorry, that was my mistake… I spelled kriesi wrong :-/
I tried changing the bit of code you suggested, and that didn’t fix the issue. I have fixed the login, and unlocked your IP range, so you should be good to log in and poke around.
Thanks,
NancyHi,
The code is working as intended but the browser will not re-direct the users to the page because of the menu path. In this case you need to use 2 different menu and add the one with just the #ID to homepage and the menu with relative path to the inner pages.
Please use a plugin like
https://wordpress.org/plugins/page-specific-menu-items/
https://wordpress.org/plugins/menu-items-visibility-control/Best regards,
VinayHi Vinay,
I am not having issues with the menu/redirecting…
When I add an anchor for an internal link, such as, /#captcha, it will jump to the correct page, but the text is at the top of the browser (not the container) so the relevant text is UNDER the top header bar.
Hey Vinay,
Yep, the letters have always been working correctly (from within the document). It’s when using a URL with a #, such as:
https://workathome24x7.com/glossary-of-internet-marketing-terms/#captcha
Then the anchored text – in this case “captcha” – is underneath the titlebar.
Hi,
The captcha also appears correctly on my end however you can still modify the scrolled location by changing the value 200 to 250 or more in the line
scrollTop: target.offset().top - 200
Let us know if you have any further questions.
Best regards,
VinayHi Vinay, I’m having a similar problem.
The code that you suggested solved the in-page scrolling problem that now it is perfect.
When i try to open a link to anchor from the outside i have the same issue:
For example.
If i try to open the link https://changeinvestments.it/blockchain/#blockchain the title “2. COS’È LA BLOCKCHAIN” is hided under the submenu.
If i am already in the page and i use the submenu that take me to the same anchor i don’t have the issue.
Do you have any suggestions?Ps. The div tag is inside the title, with the text.
Thank you for the support!
The Script from Vinay works for me:
function scrollToDiv(){ ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } }); }); </script> <?php } add_action('wp_head', 'scrollToDiv');… but the anchor link will not show in the URL – not like this http://www.mysite#anchor
This function doesn’t work at all:
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { $header['header_scroll_offset'] = $header['header_scroll_offset'] + 100; return $header; }Can you give us a working script that leaves the anchor in the url?
Hi,
Try to replace the script with the following to append the hash or the anchor to the URL.
function scrollToDiv(){ ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } window.location.hash = this.getAttribute('href'); }); }); </script> <?php } add_action('wp_head', 'scrollToDiv');Best regards,
IsmaelHis Ismael,
your new function append the hash to the URL – thanks! One more problem with this function: It´s not responsive. On smaller screens it will jump to false position.Hi frankeee,
I’m sorry for the late reply. You could try to add a different version of the script for mobile, like so:
function scrollToDiv(){ if(wp_is_mobile()) { ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } window.location.hash = this.getAttribute('href'); }); }); </script> <?php } else { ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } window.location.hash = this.getAttribute('href'); }); }); </script> <?php } } add_action('wp_head', 'scrollToDiv');Adjust the 200 value on this line in the first block, to your liking:
scrollTop: target.offset().top - 200Best regards,
Rikard.. thanks Rikard but your extension has no effect. On smaller screens <768px the position is the failure – no matter how I adjust the values.
Hey,
Could you please try changing the code to following one and adjust “300” as needed?
function scrollToDiv(){ ?> <script> jQuery(document).scroll(function() { var sections = jQuery('.avia-section'), menu = jQuery('a[href^="#"]'); menu.on('click', function(event) { var target = jQuery(this.getAttribute('href')); if( target.length ) { event.preventDefault(); if($(window).width() >= 769){ jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 200 }, 1000); } else{ jQuery('html, body').stop().animate({ scrollTop: target.offset().top - 300 }, 1000); } } window.location.hash = this.getAttribute('href'); }); }); </script> <?php } add_action('wp_head', 'scrollToDiv');Regards,
YigitHey @frankeee,
Could you please start a new thread under Enfold sub forum, attach temporary admin logins in private content field, reference this thread and point out how we can reproduce the issue? I think it will make it easier for us to provide you an accurate solution :)
Regards,
Yigit
- You must be logged in to reply to this topic.