Our current script showcases a dotted line starting from the top of the screen leading to an up arrow. The position of the arrow changes based on how far the user has scrolled down the page, allowing them to click on the arrow and scroll back to the top. While this functionality works seamlessly in Chrome, we are facing issues with Internet Explorer and Firefox. In these browsers, the dotted line does not expand, and the arrow remains stationary as the user scrolls.
We are puzzled by this behavior and would appreciate any insights or solutions.
HTML:
<div id="dotted-line">
<div id="up-arrow">^up</div>
</div>
JS:
$(window).scroll(function(){
if ($(window).scrollTop() > 10) {
var pos = $('body').scrollTop();
$('#dotted-line').css('height',pos/4);
$('#up-arrow').css('top',pos/4);
} else {
$('#dotted-line').css('height','6px');
$('#up-arrow').css('top','-150px');
}
});
P.S. We attempted creating a JSFiddle, but unfortunately, it does not support scrolling, making it challenging to demonstrate the issue.