#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › auto scroll

Auto scroll

自動スクロール

テキストの沢山書かれた長いページを全て読むには、スクロールバーを操作してスクロールしなければなりません。
ページのボタンを操作して自動的にスクロールするjavascriptです。(停止ボタン付き)
途中でスクロールを止めたり、逆向きにスクロールする事も出来るので、長文を読んで頂くような場面で重宝します。

sample

div.btn-box{
  position: fixed;
  top: 30px;
  right: 30px;
}
ul{
  list-style:none;
}
.btn{
  display: inline-block;
  margin: 1px;
  font-size: inherit;
  line-height: 1.5;
  padding:0.25em 0.5em;
  font-weight: normal;
  border:1px solid;
  border-radius: 0.2em;
  cursor: pointer;
  font-family: "Avenir Next", Avenir, sans-serif;
}
.btn{
  background-color: rgba(255,255,255,0.5);
  color: #000;
  border-color: #000;
}
.btn:hover{
  background-color: rgba(255,217,217,0.5);
  color: #cc0000;
}

<body>
<div class="btn-box">
<ul>
<li><button class="btn" onclick="autoScroll(-1);" title="up">▲</button>
<li><button class="btn" onclick="autoScroll(0);" title="stop">■</button>
<li><button class="btn" onclick="autoScroll(1);" title="down">▼</button>
</ul>
</div>
<p>~ページの内容~</p>
</body>

参考:押すと自動で画面をスクロールするボタン(Yahoo!知恵袋)