element.scrollTop - odd behavior

[Claus Mygind]

Using FireFox 19.0.2

I have noticed that when I set .scrollTop = 0, the content is indeed loaded showing the top of the content.

However the scroll bar, is left at the location where it was when last viewed.

How can I make sure that both the content and the scroll bar (slider) are set to 0 (top of container)?

The content is contained in a <div> tag. Within the container is a table that exceeds the max height of the container.

					<div 
						id="scratchPad" 
						style=" position:relative;
								top:25px;
								margin-left:auto;
								margin-right:auto;	
								border:5px ridge #ff6600; 
								padding:7px;
								background-color: #ccffcc; 
								background-image:linear-gradient(to top, #ccff99 0%, White 100%);
								height:75%;
								width:65%;
								visibility:hidden;
								overflow: scroll;
								z-index: 101;"
					>
						<table style="display: flex;margin: auto;opacity:0.85;">


	document.getElementById("scratchPad").scrollTop = 0;
	document.getElementById("scratchPad").style.visibility = "visible";

[Claus Mygind]

Upon further review, this odd behavior only happens when I reload the page.

If I close and reopen the <div> node with javaScript, the slider is correctly reset to the top of the scroll bar.

Still odd that this should happen and would be curious to know if this is a known bug?

[omerbutt]

Hi Claus
have you tried using the jquery method,

<div 
                            id="scratchPad" 
                            style=" position:relative;
                                    top:25px;
                                    margin-left:auto;
                                    margin-right:auto;    
                                    border:5px ridge #ff6600; 
                                    padding:7px;
                                    background-color: #ccffcc; 
                                    background-image:linear-gradient(to top, #ccff99 0%, White 100%);
                                    height:75%;
                                    width:65%;
                                    visibility:hidden;
                                    overflow: scroll;
                                    z-index: 101;"
                        >
                            <table style="display: flex;margin: auto;opacity:0.85;">     
 <script>
$("#scratchPad").scrollTop(0);
$("#scratchPad").fadeOut(slow);
</script>

regards,
Omer Aslam

[Claus Mygind]

Omer, thanks for your reply.

I do not believe in jQuery for a number of reasons.