IE と Firefox でこれを機能させるのに問題があります。それはクロムでのみ機能します...ページは上から下に自動スクロールし、2 つのボタンで何度も何度も戻って「アニメーションを停止します。 」 そして、それをもう一度開始する別の..とにかくここにあります.Ivも質問の下部にライブリンクを添付しました..
HTML :
<div id="Stage_About" class="Stage_About_id" style="position: absolute; margin: 0px; left: 0px; top: 2248px; width: 100%; height: 1169px; right: auto; bottom: auto; background-size: 100%; background-image: url(http://www.hd-wallpapers.com/download/blue-background_1600x1200_224-standard.jpg); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-position: 0px 0px; background-repeat: no-repeat no-repeat;"></div>
<div id="Stage_Hello" class="Stage_Hello_id" style="position: absolute; margin: 0px; left: 0px; top: 685px; width: 100%; height: 982px; right: auto; bottom: auto; background-size: 100%; background-image: url(http://www.wallgc.com/images/2013/01/black-windows-7-psdgraphics.jpg); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-position: 0px 0px; background-repeat: no-repeat no-repeat;"></div>
<div id="Stage_play" class="Stage_play_id" style="position: fixed; margin: 0px; left: 4%; top: 78px; width: 218px; height: 104px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); background-color: rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
<div id="Stage_stop" class="Stage_stop_id" style="position: fixed; margin: 0px; left: 79.3%; top: 78px; width: 208px; height: 88px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); background-color: rgb(98, 98, 98); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>
<div style="height:2000px; float:left; width:100%;">
TEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXTTEXT
TEXT
TEXT
TEXT
</div>
Jクエリ:
$("body").append($("#Stage_stop").css("position", "fixed"));
$("body").append($("#Stage_play").css("position", "fixed"));
function updown(){
var bottom = $(document).height()-$(window).height();
$('body')
.animate({scrollTop:bottom},20000)
.animate({scrollTop:0},2000,updown);
}
updown();
/* Stop animation */
$("#Stage_stop").click(function(){
$('body').stop(true);
});
/* Start animation */
$("#Stage_play").click(function(){
updown();
});
Live Example は Chrome でのみ動作します。Firefox や IE ではありません。 例のリンク