-
Posts
-
We have some problems with jumping to anchors from other pages, b.e. here: http://www.contelle.de/trainings#alltrainings. The anchor’s name is #alltrainings, you can find it just above the little red box with «Übersicht aller Trainings». Actually it depends on the browser how the focus is set. To us it seems that sometimes after focussing right on the anchor the window starts to scroll to another point, maybe caused by a script? Just try it with Mozilla Firefox to see the what I mean. Could you please let us know how we can set an anchor on this site which is working reliably in the same and correct way in all browsers (and devices)?
Thank you and beste regards
marianne
Hey maryWu,
Yes, I can see what you mean.
That is happening because not everything is been loaded properly while the page loads, so it does that small ” jump ” as the positions are been loaded to it.Best regards,
Basilisthis is a big problem to where i’m looking a long time.
It is the smoth scroll to different page anchor.
It has to load first – then scroll smoothly to the anchor.
I didn’t found a solution for that.By the way for those anchor links to id’s i created an edited hr.php – and in case of whitespace there is an input field for custom ID:
hr with ID input field : the code is on pastebin: hr.php and put it into a subfolder of child-theme folder called “shorcodes”
To load it put this into functions.php of child-theme:add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }click to enlarge
btw: i would target it as: http://www.contelle.de/trainings/#alltrainings
and you don’t need an anchor for each language you intended to install.
let the same ID name and just rename the label in the menu“link” and “angezeigter Name” they are per default the same but do not need to.
i found now a plugin which do the thing ! but it will be nice if it was an integrated behavior of enfold !
Plugin Recommendation: ps2id/
Example Page: look here https://webers-testseite.de/datenschutzerklaerung/ and press the button on the bottom
Edit: and it works with bwp minify as well without excluding those scripts
Dear Guenni007
Thank you for your reply. I installed the pugin but the problem still remains. The problem is not the jumping behaviour, but that the scrolling does not stop at the right position. It depends on the browser and the device. You can try here:
In Firefox it stops right above «Übersicht aller Trainings»….perfect. But in Chrome it stops above «Für die Nachhaltigkeit und den Praxistransfer». At Iphones it focusses above «Praxistraining Analyse von Testanrufen»
I would be very thankfull if anyone had another idea.
Thank you
MaryWu
sorry…should be a link:
Hi,
I see the plugin offers “Offset scrolling by pixels or element selector” did this not work in all browsers?
Here’s a CSS offset, set the height as the padding-top value.
The anchor link:<a class="anchor" name="one">Link One</a>The css:
.anchor { display: block!important; height: 100px!important; margin-top: -100px!important; visibility: hidden; }Or
perhaps a different plugin: https://wordpress.org/plugins/hash-link-scroll-offset/Best regards,
Mikefirst of all – you managed the anchor a bit complicated – lack of heaving an alb element with ID option when heaving a sidebar.
My hr.php got this option and you don’t need to have such a complicated construct.
the advantage of a hr.php is that you can easily adjust the positioning too.
Maybe you can give it a chance.
@mike – this plugin is the first i met that this behavior can manage. It opens the page first ( you can input the delay time in the plugin) and than scrolls down to the anchor. !
This is cool because it does not look like an abrupt loading – it is more smooth.Btw i do not know why there is on avia.js avia_header_size function this line:
if(shrinking && !isMobile)line 1551. – because this is often a reason why the anchor on mobile is under the header.i nearly allways tilted the !isMobile option:
Hi,
@guenni007 – I’m impressed by the plugin you found, and the screenshot of the settings page I saw on WP. I’m looking forward to trying it.
I saw your demo, & I saw how smooth it was.
Thanks for the issue on line 1551, I will report this :)Best regards,
Mike@Guenni007 I managed the anchor with the scroll-to-id-plugin. Please send me the link to the hr.php, I would like to give it a try. In my opinion the problem is the Layer-Slider. I duplicated the page and inactivated and activated all objects. When I inactivated the Layer-Slider, the anchor worked well. There are so many options in LayerSliderWP Do you have any idea what I could modify to make it work properly?
the link is in the thread: https://kriesi.at/support/topic/jumping-to-anchors-from-other-pages-doest-work-well/#post-855641
https://pastebin.com/dl/nW7DFTfS
and btw the plugin has an offset – there you can globally change the amount of offset to the anchor.( + und – is possible)
and btw the plugin has a delay too! you can go to new page top wait a bit (in milliseconds input field) an then scroll down.Hi,
You can also use the following filter to adjust the scroll offset.
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'] + 48; return $header; }The code above will add 48px to the default anchor scroll position.
Best regards,
Ismael@Guenni007: The problem is we do not use a child theme and I don’t feel confident to start with a running page. When I try to insert your shortcode in the normal enfold-theme I produce a fatal error:
Fatal error: Uncaught Error: Call to undefined method AviaHelper::av_mobile_sizes() in /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-content/themes/enfold/shortcodes/hr.php:302 Stack trace: #0 /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/shortcode-template.class.php(257): avia_sc_hr->shortcode_handler(Array, ”, ‘av_hr’, Array) #1 /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-includes/shortcodes.php(345): aviaShortcodeTemplate->shortcode_handler_prepare(Array, ”, ‘av_hr’) #2 [internal function]: do_shortcode_tag(Array) #3 /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-includes/shortcodes.php(223): preg_replace_callback(‘/\\[(\\[?)(av_hr|…’, ‘do_shortcode_ta…’, ‘[av_image_hotsp…’) #4 /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-includes/class-wp-hook.php(298): do_shortcode(‘[av_image_hotsp…’) #5 /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-includes/plugin.php(203): WP_Hook->app in /homepages/5/d50672444/htdocs/clickandbuilds/contelle/wp-content/themes/enfold/shortcodes/hr.php on line 302
We tried with different ways of setting the ID, so I am really not sure if that will help anyway, but it would be a nice feature.
@Mike and @Ismael: It wouldn’t be difficult if it were just about a constant offset. I could manage with CSS. But the offset depends on the browser and the device. To me it still looks like a JI problem. I have seen in the forum that there are others having similar problems with menu and anchors. But I can not find a solution. It is just not working right. And we didn’t use any special plugins on this page or any individual javascript. It seems to be a problem in the Enfold-theme and I would be really happy to find a solution for that.Thank you.
are you running an old version of enfold?
this hr.php was the new one with the screen settings option! Don’t know when they started to have that – i think it was the 4.1 Version
On your source code i see that you are running 4.0.7 – that is the reason for that behavior.
Sorry – i do not found an old version of that file to edit.i found an older enfold 4.0.5 this is the hr.php – you can see the code on pastebin
i commented it on the top that this is the version for enfold older 4.1.
it will work on newer versions too – but without screen options dialog
Download: pastebinrename it to hr.php
you than can optimise the offset via the whitespace amount
or the plugin i recommended got an offset option too !Hi,
Did you try the filter? If the issue is browser specific, we can add conditional functions to adjust the offset value for different browsers.
Best regards,
Ismael@Guenni007 and @Ismael
I updated the theme and installed the hr.php. It works now. The problem still exists but to me it seems that it is more prdictable now, it seems to scroll reproducable in each browser. With Position: relative I can try to fin a solution for each browser. I started with Firefox and Chrome and that seems to work. I have to optimize safari, but I guess I can do it with a CSS-Hack. I will be gone the next week and I will work on it after again. If I can not manage to fin a solution I will come back to you. The hr.php is really good.Thank you
Monika
i done that hr.php because if i got as you a sidebar the Colorsection did not fit for that.
And you can insert here an “offset” if scroll to anchor does not realy suit.@ Ismael and Guenni007
After trying a while with different situations I have to come back to you with the same issue. The anchor still doesn’t work. If I open the page with http://www.contelle.de/trainings#alltrainings I can adjust the right position by CSS and it works. But if I open the page by a button of antother page like http://www.contelle.de/trainings/inhouse-telefontraining/workshops-fuer-professionellen-service (there is a button “Alle Trainings” at the end of the content) it is jumping to another place, espacially in Ipad and Iphone.
I built a static test-page and the problem is not there when I delete acia.js (but other problems will occur then), I assume the problem is rooted there. Could the problem be the function function avia_scroll_top_fade()? When I disable this function I have a space under the slider and that seems to be the offset which is causing the wrong position.
Thank you for looking at it again.Hi,
Did you try the filter above? If you want to exclude other browsers from being affected by the filter, replace it with the following code.
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { if (isset($_SERVER['HTTP_USER_AGENT'])) { $agent = $_SERVER['HTTP_USER_AGENT']; } if (strlen(strstr($agent, 'Firefox')) > 0) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 48; } return $header; }The code above will only affect the Firefox browser. Adjust the pixel value “48” as needed.
Best regards,
Ismael@Ismael: Did you try out the different ways of opening the anchor? How can a filter help when it is different if I reach the page directly or by menu or by another page? It is not just a question of the browser but a question of how to get to the page. I guess there is no solution for that. Am I the only person with this problem?
Hi!
How can a filter help when it is different if I reach the page directly or by menu or by another page?
The scroll position is calculated based on the height of the top header, frames, the main header, alternate container if it exists and the main container’s scroll offset value which what we’re trying to adjust with the filter.
Best regards,
Ismael@Ismael: I applied the filter for Safari and it doesn’t help. Just try with a size smaller than 1000 px. Try this:
And the click on the Button «Zur Übersicht aller Trainings« here: http://www.contelle.de/trainings/inhouse-telefontraining
What is a bit confusing to me is that your anchor-links are just behind the page.
On all my installation the link will be (concerning to your site) : http://www.contelle.de/trainings/#alltrainings
what did you do that this linking goes to http://www.contelle.de/trainings#alltrainings ?
is it just because of your permalink structure ?@Guenni007: Mhm, interesting. I have no clue, what could I do to change it?
@Guenno007: I changed the permaling-structure…..but the problem didn’t change :-(. It sounded like a goog idea. Thanks anyway.
I will try to delay the scrolling with the page-scroll-to-id plugin. Maybe it works. Then the scrolling may start after loading the difficult javascripts.
It seems to work. I have just one more question that might be related. When I link a tab in the accordion here: http://www.contelle.de/contelle/referenzen/, b.e. http://www.contelle.de/contelle/referenzen/#toggle-id-17 than the tab opens but the page doesn’t scroll to it. Sometimes the tab is on the bottom of the page, it would be great if the opened tab would be in the top. Is there a filter or any trick to do that? Thank you.
- The topic ‘Jumping to anchors from other pages does't work well’ is closed to new replies.