「ページ内リンクでスクロールさせる」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

ページ内リンクでスクロールさせる

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ページ内リンクでスクロールさせる</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   function viewModel() {
  11.     var self = this;
  12.     
  13.     self.movePage = function (idName) {
  14.       var moveId = $("#" + idName).offset();
  15.       if (moveId != undefined) {
  16.         var speed = 500; // スクロールの速度
  17.         var position = moveId.top; 
  18.         $("html, body").animate({scrollTop:position}, speed, "swing");
  19.       }
  20.     };
  21.   };
  22.   
  23.   $(document).ready(function () {
  24.     ko.applyBindings(new viewModel());
  25.   });
  26. </script>
  28. <style type="text/css">
  29.   .ko006 {
  30.     padding:20px 10px;
  31.   }
  32.   .ko006 p{
  33.     padding:80px 0;
  34.     margin-top:10px;
  35.     border: 1px solid #aaa;
  36.     background-color: #e0e0e0;
  37.   }
  38. </style>
  40. </head>
  41. <body>
  42. <h1>ページ内リンクでスクロールさせる</h1>
  44. <div class="ko006">
  45.   <div>
  46.     <a href="#" data-bind="click: function() { $root.movePage('ko01'); }">ko01へ▼</a>、
  47.     <a href="#" data-bind="click: function() { $root.movePage('ko02'); }">ko02へ▼</a>、
  48.     <a href="#" data-bind="click: function() { $root.movePage('ko03'); }">ko03へ▼</a>、
  49.   </div>
  50.   <p><a id="ko01" name="ko01"></a>
  51.     IDが「ko01」
  52.   </p>
  53.   <div>
  54.     <a href="#" data-bind="click: function() { $root.movePage('ko01'); }">ko01へ▼</a>、
  55.     <a href="#" data-bind="click: function() { $root.movePage('ko02'); }">ko02へ▼</a>、
  56.     <a href="#" data-bind="click: function() { $root.movePage('ko03'); }">ko03へ▼</a>、
  57.   </div>
  58.   <p><a id="ko02" name="ko02"></a>
  59.     IDが「ko02」
  60.   </p>
  61.   <div>
  62.     <a href="#" data-bind="click: function() { $root.movePage('ko01'); }">ko01へ▼</a>、
  63.     <a href="#" data-bind="click: function() { $root.movePage('ko02'); }">ko02へ▼</a>、
  64.     <a href="#" data-bind="click: function() { $root.movePage('ko03'); }">ko03へ▼</a>、
  65.   </div>
  66.   <p><a id="ko03" name="ko03"></a>
  67.     IDが「ko03」
  68.   </p>
  69.   <div>
  70.     <a href="#" data-bind="click: function() { $root.movePage('ko01'); }">ko01へ▼</a>、
  71.     <a href="#" data-bind="click: function() { $root.movePage('ko02'); }">ko02へ▼</a>、
  72.     <a href="#" data-bind="click: function() { $root.movePage('ko03'); }">ko03へ▼</a>、
  73.   </div>
  74. </div>
  76. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  77. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  78. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  79. </div>
  81. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  82. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  83. </div>
  85. </body>
  86. </html>