By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,626 Members | 1,862 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,626 IT Pros & Developers. It's quick & easy.

element.scrollTop - odd behavior

Claus Mygind
100+
P: 571
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.
Expand|Select|Wrap|Line Numbers
  1.                     <div 
  2.                         id="scratchPad" 
  3.                         style=" position:relative;
  4.                                 top:25px;
  5.                                 margin-left:auto;
  6.                                 margin-right:auto;    
  7.                                 border:5px ridge #ff6600; 
  8.                                 padding:7px;
  9.                                 background-color: #ccffcc; 
  10.                                 background-image:linear-gradient(to top, #ccff99 0%, White 100%);
  11.                                 height:75%;
  12.                                 width:65%;
  13.                                 visibility:hidden;
  14.                                 overflow: scroll;
  15.                                 z-index: 101;"
  16.                     >
  17.                         <table style="display: flex;margin: auto;opacity:0.85;">
  18.  
  19.  
  20.     document.getElementById("scratchPad").scrollTop = 0;
  21.     document.getElementById("scratchPad").style.visibility = "visible";
  22.  
  23.  
Apr 15 '13 #1
Share this Question
Share on Google+
3 Replies


Claus Mygind
100+
P: 571
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?
Apr 15 '13 #2

omerbutt
100+
P: 638
Hi Claus
have you tried using the jquery method,
Expand|Select|Wrap|Line Numbers
  1. <div 
  2.                             id="scratchPad" 
  3.                             style=" position:relative;
  4.                                     top:25px;
  5.                                     margin-left:auto;
  6.                                     margin-right:auto;    
  7.                                     border:5px ridge #ff6600; 
  8.                                     padding:7px;
  9.                                     background-color: #ccffcc; 
  10.                                     background-image:linear-gradient(to top, #ccff99 0%, White 100%);
  11.                                     height:75%;
  12.                                     width:65%;
  13.                                     visibility:hidden;
  14.                                     overflow: scroll;
  15.                                     z-index: 101;"
  16.                         >
  17.                             <table style="display: flex;margin: auto;opacity:0.85;">     
  18.  <script>
  19. $("#scratchPad").scrollTop(0);
  20. $("#scratchPad").fadeOut(slow);
  21. </script>
  22.  
regards,
Omer Aslam
Apr 25 '13 #3

Claus Mygind
100+
P: 571
Omer, thanks for your reply.

I do not believe in jQuery for a number of reasons.
Apr 29 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.