Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2018年9月3日月曜日

スクロールを最上部に戻したい ELEMENT.scrollTop = 0


ELEMENT.scrollTop でスクロールされたピクセル数を取得できる

ELEMENT.scrollTop = 0
で実現できたので書き残しておこう


デモ

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
らりるれろ
わをん




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
    <style>
        #main {
            height: 120px;
            width: 240px;
            overflow: scroll;
            border: solid 1px lightgray;
        }
    </style>
</head>
<body>
    <div id="main">
        あいうえお<br />
        かきくけこ<br />
        さしすせそ<br />
        たちつてと<br />
        なにぬねの<br />
        はひふへほ<br />
        まみむめも<br />
        やゆよ<br />
        らりるれろ<br />
        わをん</div>
    <button id="bt_top">TOP</button>
    <script>
        document.getElementById("bt_top").onclick = bt_top_click;

        function bt_top_click() {
            document.getElementById("main").scrollTop = 0;
        }
    </script>
</body>
</html>
意訳
 



idがmainのスタイル
高さ
幅
スクロールする
枠線




idがmainのdiv
あ行
か行
さ行
た行
な行
は行
ま行
や行
ら行
わ行
最上部に戻るボタン

最上部に戻るボタンをクリックしたらbt_top_clickを実行する

この機能がやること
idがmainの要素のスクロールするピクセル数を決める






Latest post

Googleドキュメントに見出しを追加したい

今回の例では、ドキュメントの末尾に「見出しD」 を追加します。 見出しA, B, C, Dのスタイルは、見出し3 ( HEADING3 ) に設定しています。  下記Code.gsの  GOOGLE_DOCUMENT_URL を設定して  addHeadingToEnd()  を...