Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The attribute was not defined properly in the past. It was introduced by IE, I think, then reverse engineered to be implemented by different user agents. It has been since described in <a href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" rel="noreferrer">CSSOM</a> (still a working draft). As of today, there is still a bug indeed in Opera which is being in the process to be fixed.</p> <p><del>## Possible hack.</p> <p>A solution will be</p> <pre><code>$(window.opera?'html':'html, body').animate({ scrollTop:0}, 'slow' ); </code></pre> <p>Be careful because if Opera fixes it at a point, the code is likely to behave strangely. </del></p> <h2>Why?</h2> <ul> <li>In Firefox and IE quirks mode, you have to set the property on the "body" to make the page scroll, while it is ignored if you set it on the "html". </li> <li>In Firefox and IE standards mode, you have to set the property on the "html" to make the page scroll, while it is ignored if you set it on the "body". </li> <li>In Safari and Chrome, in either mode, you have to set the property on the "body" to make the page scroll, while it is ignored if you set it on the "html".</li> </ul> <p>Since the page is in standards mode, they have to set it on both the "html" and "body, or it won't work in Safari/Chrome. </p> <p>Now here's the bad news; in Opera, when you read the scrollTop of the body it is correctly 0, since the body is not scrollable within the document. But Opera will scroll the viewport if you set the scrolling offset on <em>either the "html" or "body"</em>. As a result, the animation sets two properties, once for the "html" and once for the "body". The first starts at the right place, while the second starts at 0, causing the flicker and odd scroll position.</p> <h2>Better solution not involving user agent sniffing</h2> <p>From <a href="http://w3fools.com/js/script.js" rel="noreferrer">http://w3fools.com/js/script.js</a></p> <pre><code> // find out what the hell to scroll ( html or body ) // its like we can already tell - spooky if ( $docEl.scrollTop() ) { $scrollable = $docEl; } else { var bodyST = $body.scrollTop(); // if scrolling the body doesn't do anything if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) { $scrollable = $docEl; } else { // we actually scrolled, so, er, undo it $body.scrollTop( bodyST - 1 ); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload