Scroll to container off put by header

Hello,

On my product pages right above the Add to Cart button, I have added a link to the full product description container.

When clicked, the window scrolls all the way down aligning the start of the description container with he top of the browser window. Unfortunately there I have the overlayed header that comes down and blocks the beginning of the container.

Is there a way of having the page scroll to the description container PLUS the thickness of the header?

Thank you,

See images attached

Attachments:

You must be logged in to view attached files.

Hello,

It is possible with additional JS code only. Try to use the solution https://codepen.io/jvondoom/pen/VvbrdY
Also, you can also extract some value from the anchor position https://gyazo.com/0af372e4e07904a95df613ea9960b42f

Kind Regards

Hello,
I understand what you are telling me to do here, I should play with the “-100” anchor to find the right value, but I have no idea how to execute this. What is the code snippet that I should be adding to my Custom JS section?

I am not very familiar with JS. Also I assume this should go in the “On Document Ready” section right?

Thank you!

Hi,

Just check the example I sent you. It has all the code you need and yes, you need to put it to the document ready section.

Kind Regards

I do not know Javascript. Do I need to make a specific code snippet for every link that scrolls to a container on the page or one generic? This issue occurs also with the standard “Customer Reviews” link right under the product title.
What would be the code to fix that one if the scroll offset was -100?
Thank you!

the example you gave me is uses a click function on divisions. How do I change divisions to “links that already have a scroll function”?

Sorry, but we don’t understand what do you mean by click function on divisions? Could you please explain?

Let me start over.

-Action:
When I click on any link to a container on the page (see video), the page scrolls to align the top of the container with the top of the browser.
-The problem:
My header menu is “overlay” so it block the top part of the container (see images 3 and 4).
-Your proposal:
You gave me a JS code showing me that when I click on <div class=”top”> the page scrolls and I can offset that with a value like -100 (the height of the header) to compensate for the overlay of the theme header. This code needs to be adapted to my content like the the standard woocommerce Customer Reviews link and my custom one for the description. How do I do this since I am not familiar with javascrips?
I can’t just copy the code you gave me.

Sorry, but we don’t have a working solution for such customization. And since it is out of our theme support scope, we provided you an example of a similar solution.

I don’t see how this is out of theme support. Your theme has a heaver overlay that scerws up the standard woocommerce scroll function for review. No customization from my end.
The theme should automatically compensate the scroll distance since it makes absolutely no sense to begin displaying desired text hidden under the header!
Any scrollTop function should be programmed to compensate for the header…
This is not a customization, it is fixing something nonsensical in the theme.
see attached video, it was too large to put in the last message. Note I am clicking on “(1 customer review)” button stock from woocommerce. You can try this on my site as well to see
Thank you

unabel to attach mp4… see pictures

Attachments:

You must be logged in to view attached files.

Hello,

We tested on several different devices and we don’t see such a problem.

https://drive.google.com/file/d/1jBd4-w7hrpfHbx-jHKgxVF9mPtUBTZq-/view?usp=sharing

Kind Regards
XTemos Studio

[Author]

Posts