I created a page with a large DIV inside a small one, with a scroll bar. I have added a link that calls Javascript to set the scroll position to 0. I present here sample code with 2 links for the same purpose. With Chrome, both of them work. With Firefox only the first one works. The second has a surprising effect: It wipes out the page and shows a 0.
I would appreciate if someone enlightened could comment what the W3 specification says about href with Javascript in general and about the effect I observe with href2 in Firefox, but not in Chrome.
Here is the sample code:
<!DOCTYPE html>
<html>
<head>
<script>
let smallContainer;
function fOnload() { smallContainer = document.getElementById('smallContainer');
fSetScrollPos(250);
}
function fSetScrollPos(pos) { smallContainer.scrollTop = pos; }
</script>
</head>
<body onload="fOnload()">
<div id="smallContainer" style="width:200px; height:100px; overflow:auto; border:2px; background:yellow;">
<div style="width:100px; height:400px; border: 2px solid red; background:green;">
</div>
</div>
<p><a href="javascript:fSetScrollPos(0)">href1</a></p>
<p><a href="javascript:smallContainer.scrollTop=0">href2</a></p>
</body>
</html>
