iframe-Dokument mit scroll-behavior: smooth

Ein iframe kann mit JavaScript vom aufrufenden Dokument aus gesteuert werden.

Das HTML besteht nur aus dem Aufruf des iframe und den Buttons und ruft scrollIntoView auf, um zum Sprungziel zu scrollen. Für das weiche Scrollen sorgt JavaScript mit { behavior: 'smooth' }.

<iframe id="myIframe" title="…" src="iframe.html" width="600" height="400"></iframe>

<div>
	<button onclick="scrollSmooth('area1')">Area 1</button>
	<button onclick="scrollSmooth('area2')">Area 2</button>
	<button onclick="scrollSmooth('area3')">Area 3</button>
	<button onclick="scrollSmooth('area4')">Area 4</button>
</div>

<script>
function scrollSmooth(sectionId) {
	var iframe = document.getElementById('myIframe');
	var targetElement = iframe.contentDocument.getElementById(sectionId);
	targetElement.scrollIntoView({ behavior: 'smooth' });
}

/**	Sicherstellen, dass die Funktion funktioniert, 
	sobald der iframe-Inhalt geladen ist **/
document.getElementById('myIframe').onload = function() {
	document.getElementById('myIframe').contentDocument.documentElement.style.scrollBehavior = 'smooth';
}
</script>