I am pretty new to coding so am just going through the W3Schools HTML course. I veer off if I find something I like, much like the implementation of Iframes.
My problem is that I have put an Iframe into my webpage, hidden it, enabled it to show when a link is clicked (piece of text) and then it appears. When the text is clicked, the Iframe shoots to the top of the page, basically scrolling itself to the top. I want to stop that, and have it open where it was clicked so the information above can still be viewed, as I also think it is quite sudden and jarring to have it shoot up when you aren't expecting it.
<script>
function clickMe() {
document.getElementById('izanagisBurden').src="https://www.light.gg/db/items/3211806999/izanagis-burden/";
document.getElementById('izanagisBurden').style.display='';
document.getElementById('forbearance').style.display='none';
document.getElementById('theLament').style.display='none';
}
function clickMe2() {
document.getElementById('forbearance').src="https://www.light.gg/db/items/613334176/forbearance/";
document.getElementById('forbearance').style.display='';
document.getElementById('izanagisBurden').style.display='none';
document.getElementById('theLament').style.display='none';
}
function clickme3() {
document.getElementById('theLament').src="https://www.light.gg/db/items/3487253372/the-lament/";
document.getElementById('theLament').style.display='';
document.getElementById('forbearance').style.display='none';
document.getElementById('izanagisBurden').style.display='none';
}
</script>
<dl class="threeWeapons">
<dt><a class="kinetic" href="#izanagisBurden" onclick="clickMe()">Izanagi's Burden.</a></dt>
<dd class="subKinetic">A Primary Sniper Rifle that has the ability to load a bullet with 4x the amount of damage, if ammo is sufficient.</dd>
<iframe id='izanagisBurden' src="https://www.light.gg/db/items/3211806999/izanagis-burden/" nojump="true" style="border: none; display: none;" height="300px" width="100%" title="Izanagis Burden's Light.gg page." ></iframe>
<dt><a class="arc" href="#forbearance" onclick="clickMe2()">Forbearance.</a></dt>
<dd class="subArc">A Wave-Frame Grenade Launcher that has Arc damage. Sends out a wave of damage from grenade contact location to destroy enemies.</dd>
<iframe id='forbearance' src="https://www.light.gg/db/items/613334176/forbearance/" style="border: none; display: none;" height="300px" width="100%" title="Forbearance's Light.gg page." ></iframe>
<dt><a class="solar" href="#theLament" onclick="clickme3()">The Lament.</a></dt>
<dd class="subSolar">A Solar Sword that acts like a chainsaw. Holding block rev's the chainsaw up and then allows for light or heavy attacks to cause healing and more damage.</dd>
<iframe id='theLament' src="https://www.light.gg/db/items/3487253372/the-lament/" style="border: none; display: none;" height="300px" width="100%" title="The Lament's Light.gg page." ></iframe>
</dl>
This is my current code, apolagies for the mess, I'm just throwing things in as and when I find them/figure out how to implement them and sorting the formatting out later. I'm not looking for any help cleaning it up, just help to stop the Iframe from auto-scrolling my webpage down. I don't have a clue as to what I could possibly implement, thus I've been going through multiple searches online, but everyone is purely trying to stop scrolling within an Iframe, not the Iframe moving their own webpage.
You need to cancel the browser event in your functions
function(event){
event.preventDefault()
}