somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】scrollTopについて

ある程度スクロールしたときに、TOP位置にスクロールするボタンを作っていたときに起きた問題をメモしておきます。問題とは、スクロールしないことであり、原因はDOMの指定違いでした。

スクロール方法

まず、箇条書き程度に方法を書きます。jQueryで実現しました。

  1. windowのスクロールイベント発生時の処理を記述する
  2. スクロールTOP位置が一定値を上回っていたとき、TOP位置にスクロールするボタンを表示する
  3. 逆に下回っていたとき、ぼたんを非表示にする
  4. ボタンクリックイベント発生時の処理を記述する
  5. animeteを用いて、スクロールTOP位置を0にする

animateを行うDOM指定

DOMには、bodyを指定しました。以下、動いたブラウザです。

以下、bodyでは動かなかったブラウザです。

  • FireFox11
  • IE8

scrollTop

scrollTopは、スクロールTOP位置を表すプロパティです。これは、以下の要素に存在します。

  • document.documentElement
  • document.body

documentElementは、ルート要素をあらわします。つまり、htmlタグです。bodyでは動かなかったブラウザではhtmlを指定することで解決します。逆にbodyにはscrollTopが存在しないため動きません。そこで、存在するほうを指定するようにすれば問題ありません。下記のようにして判定しました。

var scroll_element = $('html');
if (document.body.scrollTop) {
    scroll_element = $('body');
}

厳密には、存在しない(undefinde)のではなくずっと0なので注意してください。そのため、TOP位置での判定はできませんでした。または、以下のようにして判定もできます。

scroll_element = $('html, body');

複数を選択するセレクタの書き方です。ただし、これにはanimeteのコールバック関数を複数回動作させてしまう問題や、ちらつくという問題があるようです。詳しくはこちらに記載してありました。