HancoEuropa Posted May 24, 2021 Share Posted May 24, 2021 Hey hi -- I often need to give users a link like /index?m=TermsOfService#termtitle3 or /knowledgebase/6/Feature-Development.html#initial-feature-development (you know, because that is useful to the user to go to the right place in a document. 😇 ) And yes, the page loads, and goes to that paragraph correctly. And then .... ZOOOOM! It jets back up to the top of the page. Every time, every load. Why? I have seen some scrolling scripts here and there ... but how does one disable this on page load (or just forever and ever)? Thanks! 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 25, 2021 Share Posted May 25, 2021 On 24/05/2021 at 15:34, HancoEuropa said: Why? I would be fairly certain that this is something about your WordPress theme or settings doing this... out of the box, Six wouldn't do that... though 21 might be doing something similar - but it does it so fast it's hard to tell for sure. 0 Quote Link to comment Share on other sites More sharing options...
HancoEuropa Posted May 26, 2021 Author Share Posted May 26, 2021 (edited) Yeah just saw alot of scrollTop methods etc in the scripts.js file, quite extensive really, assumed it was one of them. So link#bookmark is working fine on your Six? No scroll to top thing happening? Tested with both Six and Twenty-one -- identical behaviour for all templates when testing at https://hancoeuropa.com/solutions/knowledgebase/6/Feature-Development.html#initial-feature-development Goes to bookmark then jets back up to the top immediately. Entering in the address bar on the same address does go down to the anchor, but obviously would want that behaviour first time around. Smells like maybe a Bridge thing since all templates doing the same ... or Wordpress as u suggested; seems like such a simple thing to avoid circumventing, but apparently not. Sigh. Edited May 26, 2021 by HancoEuropa link correction 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted May 28, 2021 Share Posted May 28, 2021 On 26/05/2021 at 08:38, HancoEuropa said: So link#bookmark is working fine on your Six? No scroll to top thing happening? on initial testing, yes; after thorough testing* on Wednesday, no - same thing occurs on both Six & 21. * I copied your t&c to a kb article, added a internal link to the navbar.... from an external page, it links to the anchor and then scrolls back to the top; when on the intended page, the internal link works without issue. On 26/05/2021 at 08:38, HancoEuropa said: Smells like maybe a Bridge thing since all templates doing the same ... or Wordpress as u suggested; seems like such a simple thing to avoid circumventing, but apparently not. I think that I can suppress it using JQuery in a hook (figuring this out nearly sent me insane... perhaps it has, I can't tell anymore!)... <?php # Prevent Top Scrolling With Hash Links Hook # Written by brian! function prevent_hash_link_scrolling_hook($vars) { return <<<HTML <script> (function($) { $(document).ready(function() { var internalhash = window.location.hash; $('html, body').animate({ 'scrollTop': $(internalhash).offset().top }, 100); }); })(jQuery); </script> HTML; }; add_hook("ClientAreaHeaderOutput",1,"prevent_hash_link_scrolling_hook"); i'm marking the internal links in the kb article using IDs... <a id="backup"></a> and then the navbar link is referencing it using... index.php/knowledgebase/38/Terms-of-Service.html#backup ... and then when I test it, clicking on the default link on the kb category page takes you to the t&c page as normal; whereas clicking on the navbar link (which contains the #backup internal link in the URL), takes you direct to that section without any scroll to the top. hopefully this works for your situation. 🙏 it's tested for me as working in Six & 21, but personally i'd probably limit the hook to only run on specific pages, e.g those that you know you plan to use anchor links in - but that's cos i'm not keen on having hooks running on every page without thoroughly testing the consequences of them doing that! 0 Quote Link to comment Share on other sites More sharing options...
HancoEuropa Posted May 29, 2021 Author Share Posted May 29, 2021 (edited) Brian, you sir have gone above and beyond the call of duty! Hook works perfectly. Will consider limiting with template = or pagetitle = in the hook. What a relief that is -- with some of the terms/knowledgebase stuff, was getting to be a bit important to resolve. 19 hours ago, brian! said: suppress it using JQuery in a hook (figuring this out nearly sent me insane Yeah, that jQuery was definitely driving me to ask for help -- your solution is elegant and thanks for diving down into that -- was too deep for me! Added .offset().top - 177 just to accommodate the Wordpress header height. Works a treat now with something like "Full details in our Terms of Service" Cheers mate! D Edited May 29, 2021 by HancoEuropa added example link for Terms 0 Quote Link to comment Share on other sites More sharing options...
HancoEuropa Posted June 20, 2021 Author Share Posted June 20, 2021 Did put in some filters finally. But can't figure out how to put a variable in that HTML block part returned. Sure it's simple -- need to put in the variable $headerscroll where it has 188 in the html part. How? # Prevent Top Scrolling With Hash Links Hook # Written by brian! function prevent_hash_link_scrolling_hook($vars) { $title = $vars['pagetitle']; if ($title == LANG::trans('termsofservice') || $title == LANG::trans('knowledgebase.name')) { if ($title == LANG::trans('termsofservice')) { $headerscroll = 188; } elseif ($title == LANG::trans('knowledgebase.name')) { $headerscroll = 25; } else { $headerscroll = 177; } return <<<HTML <script> (function($) { $(document).ready(function() { var internalhash = window.location.hash; $('html, body').animate({ 'scrollTop': $(internalhash).offset().top - 188 }, 100); }); })(jQuery); </script> HTML; } }; Thanks for any suggestions :) 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.