Hi Sim,
thanks for creating this as a new thread and providing a link.
The main issue here is that you have a sticky header. Because of this, it’s impossible to automatically calculate where the page should scroll to so that the header does not overlap it. Different sites have different headers and different sizes using different HTML and CSS etc.
Luckily, there is a workaround. Some extra info below in case anyone else is interested in how this all works.
The default scrolling hands all of the grunt work to the browser. Essentially we say “hey browser. Here is the next question, make sure it is visible in the window” and the browser does the rest. This is super lightweight and works 99% of the time.
The old scrolling is called “Legacy Scrolling” and is the original method HD Quiz used to try and figure out where to scroll to. This method attempts to do all of the calculations ourselves and it is a nightmare to support and maintain (some themes scroll the body – as they should, and some degenerates have custom divs that scroll the main content). However, it is useful since we can define a custom “offset” to compensate for a large sticky header.
The solution:
First, enable Legacy Scrolling in the About / Options page. By default, this method sets a custom offset of 40px which is fine for the majority of users – but you have a large header. So we need to make a small change to HD Quiz to change this offset to something larger.
(let me know if you have trouble with the following)
Go to plugins -> plugin editor. On the top right is a dropdown where you can select HD Quiz. On the right sidebar, open the includes folder, then js, and finally open hdq_script.js. You are now editing the main script file!
Scroll down to line 879 and you will see
scrollTop: jQuery(".hdq_question:visible").offset().top - 40,
change that 40 to something larger. Looking at your site, I think 110 should be a good number. Save and then make sure to clear your browser cache!
