Hello Hitchhikers!
Have you ever encountered an autoscroll issue while integrating an answers iframe search container into a website? Though our best practices say to ensure our results container is as high up in the page as possible, there are scenarios where we’d like to have a banner or other section above our results section. This creates an issue when clicking one of the verticals of your answers search experience as the page will autoscroll to the top. Another issue you might encounter is when we try linking to a specific id within a page. Notice how the following link (Add Search Bar - Header Option | Hitchhikers) has a # following by an id of an HTML element. If there’s an answers result container within the linked page, it will also autoscroll to the top. I will show you how to disable autoscrolling on your site!
Steps:
-
Since we know the iframe-common.js script is causing our browser to scroll to the top, we’ll have to override the file.
-
On Code Editor, click on the tools dropdown (located at the top right of the page)
-
Click on Jambo Commands > Override Theme > select
static/js/iframe-common.js. This will add a new file on your repository understatic/js/iframe-common.js. -
Now onto the fun part! Editing our new
iframe-common.jsfile! Delete liness 69-74 as shown in the screenshot below.
-
Click on the View Live Preview button to test your code.
-
Commit your files, tag your release and deploy!
Have fun coding!