On this page (https://www.hollandhart.com/pet-care) is a blue thumbnail image that, when clicked, I would like to send the user to the News And Insights area of the page, which is at this url: https://www.hollandhart.com/pet-care#newsInsight. Similar behavior to when a user clicks on the "News and Insights" navigation item on the left. However, when I've added an anchor tag around this image to go to https://www.hollandhart.com/pet-care#newsInsight, nothing happens.
The website vendor tells me that the page needs to reload in order for that area to display because of the javascript being used. If you click on the page navigation items to the left, you'll notice that the page reloads and then displays the related content. So, because the anchor tag code I'm using isn't forcing a page reload, the anchor tag isn't effective.
I've tried the following code, but it doesn't seem to work:
<a href="https://www.hollandhart.com/pet-care#newsInsight" onclick="window.location.reload(true);"><img align="right" alt="" height="51" src="/webfiles/Images/Pet_Care_Industry_Widget_Final.png" width="300" /></a>
Any other ideas???? Please know that this is a CMS with a visual editor, so any code between script tags will likely get stripped out by the CMS. I would need to be an inline solution.
Any help would be greatly appreciated. THANKS!
Store the desired anchor ref in session storage, and then trigger a reload.
When the page loads, check session storage for a "desired anchor ref"; if you find one, use scrollIntoView on the targeted element, and delete the "desired anchor ref" from session storage.
--
You might be able to get all that into an inline click handler.
Looks like the website vendor was able to get this done. Some of this is probably code that only works with their CMS, but here's what they did, if you're curious:
<a href="javascript:void(0);" onclick="event.preventDefault();$('.assocType a[data-tag=newsInsight]').click();return false;"><img align="right" alt="" height="51" src="/webfiles/Images/Pet_Care_Industry_Widget_Final.png" width="300" /></a>