My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scroll up to the content when an image at the bottom of the page is clicked.
Here is the JQuery code snippet I am working with for hiding and showing content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
I attempted to use a 'scrollIntoView' function to achieve this scrolling effect:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
The following code includes the HTML content where both functions are called:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
This next section contains the content that displays at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
Despite attempting to combine these two JavaScript functions, only jQuery('.targetDiv').hide() seems to work as intended.