Scroll offset with sticky header
-
Is there a way to set an offset when the quiz steps are submitted. When the Next / Previous / Submit buttons are clicked, the questions scroll too high on the page that has a sticky header. Is there a way to set an offset to adjust the top scroll position?
-
Dear @mshihinski
Hope you are doing well.
Can you please share the quiz link with us.
So I will check and help you to fix the issue.
Regards,
SumitDear @mshihinski ,
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
Regards,
SumitI was not able to respond to this due to a site error on the forums, but the URL in reference is https://www.dewpoint.com/cybersecurity-quiz/
Dear @mshihinski
We are not able to see the quiz on the link you shared.
Please check the below-given link for your reference.
https://nimb.ws/x0Tc6f
Regards,
Sumit@sumitsanadhya The link is fine but it looks like the security team has set up restrictions that block any traffic outside the US. I have requested more info from them.
Is there a different way we can resolve this? I can provide a video of what is happening. The javascript that scrolls the page does not account for a sticky header which causes the first question to be hidden behind the header.
Dear @mshihinski ,
We kindly request that you share the video with us, and to aid us in troubleshooting the reported issue effectively, we would greatly appreciate if you could provide us with the website link.
If possible can you please share the step-by-step instruction to reproduce the issue at our that will be good.
Looking forward to your reply.
Regards,
SumitI have not received permission to share the website to areas outside the US at this time. If that changes, I will report back. This is a video of the form scrolling under a sticky website header.
https://vimeo.com/847509627/e06c27d603?share=copy
Steps to reproduce.
- Create a quiz on a site with a sticky header.
- Fill out each page of the quiz.
- Click Next.
- Watch quiz questions scroll under the header.
Ideal option would be to have a way to set an offset for the scroll feature.
Dear @mshihinski ,
Thank you for sharing the video and steps.
I request you to please navigate to the quiz options tab > Display > Disable scroll on next and previous button click?
Please set this option to “Yes” and then check.
Please check below-given screenshot link for your reference.
https://nimb.ws/P16izl
Once you done with the changes then please clear the website and browser cache.
Do let me know if you need more help.
Regards,
Sumit@sumitsanadhya you should now be able to access the original URL to the live quiz page. Let me know if you still have issues connecting.
We need this to scroll to the correct offset. Disabling the scroll leaves us with a form that the user has to manually scroll back to the first question of each step.
Is there no way to create an offset? Or, is there JavaScript events we can hook in to in order to add our own code without modifying the plugin files?
-
This reply was modified 2 years, 10 months ago by
mshihinski.
Dear @mshihinski ,
Thank you for the quiz link now I am able to see the quiz page.
Let me discuss this with our technical team. I will keep you posted with further updates soon.
Thank you for your understanding and cooperation in this matter.
Regards,
SumitDear @mshihinski ,
You can use this jQuery code to set the scroll offset.jQuery(document).on('qsm_scroll_to_top_after', function(e, element){ jQuery('html, body').animate({ scrollTop: element.offset().top - 250 }, 1000); })Once you add the code please clear the website and browser cache and then check.
Let me know if you need more help.
Regards,
Sumit@sumitsanadhya This creates a new issue. The page scrolls to the wrong position then scrolls to the new position. While this works it is not an ideal user experience for people using the form.
Would it be possible to add an option to set the offset the plugin uses other than the default or have a way to override the default script from scrolling and still have the javascript event trigger?
If I disable the default scroll the event doesn’t fire.
Thank you for your assistance so far. I appreciate it.
@sumitsanadhya Following up on this. Is this a possibility?
Dear @mshihinski ,
First of all, I want to apologize for the late response to your request. It’s not our usual standard and I understand how frustrating this delay must be.
Our technical team is still working on it. I will keep you posted with further updates soon.
Thank you for your patience and understanding in this matter.
Regards,
SumitDear @mshihinski ,
You can Disable scroll on next and previous button click option then use the below-given custom js to scroll.
Screenshot: https://snipboard.io/YpwbCm.jpg
Custom js code
jQuery(document).on(‘qsm_next_button_click_after qsm_previous_button_click_after’, function(e, quiz_id){
var $container = jQuery(‘.qsm-quiz-container-‘ + quiz_id);
jQuery(‘html, body’).animate({ scrollTop: $container.offset().top – 250 }, 1000);
});By using this custom script, the scrolling functionality will be handled exclusively by this code, and the plugin’s default scrolling behavior will not interfere.
Do let me know if you need more help.
Regards,
Sumit
The topic ‘Scroll offset with sticky header’ is closed to new replies.