Element.scrollTo - エレメントの位置までスクロール
この機能を実行するにはprototype.jsが必要です
構文
Element.scrollTo(element)
引数: element=移動対象のエレメント
「エレメントの位置までスクロール」サンプルコード
| 1 | <html> |
| 2 | |
| 3 | <head> |
| 4 | <title>Element.scrollTo - エレメントの位置までスクロール</title> |
| 5 | </head> |
| 6 | |
| 7 | |
| 8 | <!--エレメントの位置までスクロールのサンプル--> |
| 9 | <script type="text/javascript" src="/js/prototype.js"></script> |
| 10 | <script type="text/javascript"> |
| 11 | function execute() { |
| 12 | var item = $('sample'); |
| 13 | Element.scrollTo(item); |
| 14 | } |
| 15 | </script> |
| 16 | <body> |
| 17 | <button onclick="execute()">サンプル実行</button> |
| 18 | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
| 19 | <div id="sample" style="background-color:red">element</div> |
| 20 | </body> |
| 21 | |
| 22 | </html> |
| ポップアップ | 印刷 | ←ポップアップでソースコードを開き、簡単にコピーできます | ? |
忘却曲線を使って「Element.scrollTo」を確実に記憶に残す「Element.scrollToの動作デモ」
新しいウィンドウで実行 | スクリプトを編集＆実行 - スクリプトをWEB上で編集＆動作確認することが出来ます。
関連ページ
エレメントにクラス名を追加する - Element.addClassName
エレメントのクラス名を得る - Element.classNames
エレメントのホワイトスペースを除去 - Element.cleanWhitespace
エレメントの中身が空かどうか調べる - Element.empty
エレメントの幅・高さを調べる - Element.getDimensions
エレメントの高さを調べる - Element.getHeight
エレメントのCSSプロパティを調べる - Element.getStyle
エレメントがclass属性を持つか調べる - Element.hasClassName
エレメントを隠す - Element.hide
エレメントにクリッピング属性を付与 - Element.makeClipping
エレメントにposition:relativeのCSS属性を付与 - Element.makePositioned
エレメントを削除 - Element.remove
エレメントのクラス名を削除 - Element.removeClassName
エレメントに指定CSSプロパティを設定 - Element.setStyle
エレメントの表示 - Element.show
エレメントの表示状態をトグル - Element.toggle
エレメントのクリッピング属性を除去 - Element.undoClipping
エレメントのCSS属性(position)を除去 - Element.undoPositioned
エレメントのinnerHTMLを書き換える - Element.update
エレメントの表示状態を調べる - Element.visible