![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
October 14, 2016 at 2:55 am #698946
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.
October 14, 2016 at 7:31 am #698992Hey 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,
VinayOctober 14, 2016 at 6:18 pm #699252Hi. It didn’t work. Well, sort of – it works if I am on the page where the internal links are, but doesn’t work if I link to an anchor from a different page. Weird!
-
This reply was modified 7 years, 11 months ago by
lunatrix.
October 18, 2016 at 5:14 am #700360Bump
October 18, 2016 at 5:53 pm #700787Hi,
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,
VinayOctober 18, 2016 at 6:21 pm #700800Hi 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,
NancyOctober 21, 2016 at 5:33 am #702154Hi,
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,
Vinay-
This reply was modified 7 years, 10 months ago by
Vinay.
October 21, 2016 at 10:59 pm #702667Hi 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.
-
This reply was modified 7 years, 10 months ago by
lunatrix.
October 25, 2016 at 8:25 am #703636Hi,
We have updated the scroll offset value to 150 in functions.php file and it scrolls to the right place now please review the page or check the attached screenshot.
Best regards,
Vinay-
This reply was modified 7 years, 10 months ago by
Vinay.
October 26, 2016 at 4:16 am #704096Hey 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.
-
This reply was modified 7 years, 10 months ago by
lunatrix.
October 30, 2016 at 4:04 pm #705818Hi,
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,
VinayOctober 2, 2018 at 11:39 am #1016987Hi 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!
October 4, 2018 at 4:28 am #1017663Hi,
Is it working properly when you disable the columns’ animation?
Best regards,
IsmaelFebruary 27, 2021 at 9:48 am #1284063The 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?
March 1, 2021 at 1:26 pm #1284414Hi,
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,
IsmaelMarch 2, 2021 at 1:45 pm #1284737His 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.March 11, 2021 at 6:05 am #1287312Hi 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 - 200
Best regards,
RikardMarch 11, 2021 at 1:19 pm #1287415.. thanks Rikard but your extension has no effect. On smaller screens <768px the position is the failure – no matter how I adjust the values.
March 16, 2021 at 12:25 pm #1288486Hey,
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,
YigitMarch 16, 2021 at 2:40 pm #1288539sorry, this is also not working. Thank you anyway for your efforts.
March 16, 2021 at 5:47 pm #1288581Hey @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 -
AuthorPosts
- You must be logged in to reply to this topic.