HTAでスクロール-Idea to Code-

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

HTA

スクロール2015/12/10

表示部分をスクロールしてページ遷移なく切り替えを実装。

スクロールの制御アルゴリズムは下記を参考に作成。

jQuery ─ ヌルヌルッとページ内スクロール : てるてるブログ

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">
        <p>test text1</p>
        <a href="#a" class="scroll">move a</a>
      </div>
      <div id="a">
        <p>test text2</p>
        <a href="#b" class="scroll">move b</a>
      </div>
      <div id="b">
        <p>test text2</p>
        <a href="#top" class="scroll">move top</a>
      </div>
    </div>
    <div id="reset">
      <a href="#top" class="scroll">reset</a>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js

$(function() {
  // 初期化
  $('html, body').animate({scrollTop:0}, 500);
  $("#top a").addClass("bottom-pos");

  // scrollクラスの要素のクリック動作
  $(".scroll").click(function(event){
  event.preventDefault();  // イベントキャンセル？

  var url = this.href;    // hrefの値を取得

  var parts = url.split("#");  // #で分割
  var target = parts[1];      // #の後ろを取得

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

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

  if($(this).parent().attr("id") != "reset"){    // リセット以外なら
    $("#"+target+" a").addClass("bottom-pos");  // 移動先のリンクを下に表示
    $(this).removeClass("bottom-pos");          // 移動もとのリンクを戻す
  }else{                                        // リセットなら
    $("#contents div a").removeClass("bottom-pos");  // すべてのリンクの位置を戻す
    $("#contents div:first a:last").addClass("bottom-pos");  // 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;
}

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