Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

HTA

スクロールその２2015/12/11

HTAでスクロールを改良してみた。


スクロールをボタンとリンクで行えるように改良。

各要素にスクロールのためのボタンとリンクを設置可能に変更。


実行イメージ
scroll.hta 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script language="VBScript" src="resize.vbs"></script>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <title>スクロールテスト</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
    <hta:application
      scroll="no"
    />
  </head>
  <body>
    <div id="contents">
      <div id="top">
        <h1>top</h1>
        <p>test text1</p>
        <br>
        <p><a href="#" next="a" class="scroll">to a link</a></p>
        <p><a href="#" next="b" class="scroll">to b link</a></p>
        <p><a href="#" next="c" class="scroll">to c link</a></p>
        <br>
        <button next="a" class="scroll">move a</button>
        <button next="b" class="scroll">move b</button>
        <button next="c" class="scroll">move c</button>
        <button next="a" class="scroll">move a</button>
      </div>
      <div id="a">
        <h1>a</h1>
        <p>test text2</p>
        <button next="b" class="scroll">move b</button>
      </div>
      <div id="b">
        <h1>b</h1>
        <p>test text3</p>
        <button next="c" class="scroll">move c</button>
      </div>
      <div id="c">
        <h1>c</h1>
        <p>test text4</p>
        <button next="top" class="scroll">move top</button>
      </div>
    </div>
    <div id="reset">
      <button next="top" >reset</button>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
script.js 
$(function() {
  // 初期化
  $('html, body').animate({scrollTop:0}, 500);
  $("#top button:last").addClass("bottom-pos").focus();

  // scrollクラスの要素のクリック動作
  $(".scroll").click(function(event){
    event.preventDefault();

    var target = $(this).attr("next");          // 次を取得
    var target_offset = $("#"+target).offset();  // targetのoffsetを取得
    var target_top = target_offset.top;          // targetのtop位置を取得

    $('html, body').animate({scrollTop:target_top}, 500);  // 取得した位置へスクロール

    $("#"+target+" button:last").addClass("bottom-pos").focus();  // 移動先のボタンを下に表示
    $(this).removeClass("bottom-pos");          // 移動もとのボタンを戻す
  });

  // リセット動作
  $("#reset button").click(function(event){
    event.preventDefault();

    $('html, body').animate({scrollTop:0}, 500);          // 初期位置に戻る
    $("#contents div button").removeClass("bottom-pos");  // すべてのボタンの位置を戻す
    $("#contents div:first button:last").addClass("bottom-pos").focus();  // 1つ目のボタンを下に表示
  });
 });
resize.vbs resize.vbs 
window.resizeTo 300,450
style.css 
* {
  margin : 0;
  padding : 0;
}

#contents > div {
  height : 450px;
  padding : 5px;
}

#reset {
  bottom : 10px;
  right : 10px;
  position : fixed;
  z-index: 999;
}

button {
  border-radius : 5px;
  padding : 3px 5px;
}

.bottom-pos {
  bottom : 10px;
  left : 10px;
  position: fixed;
  z-index: 999;
}