ページ内自動でスクロール

ページ内でボタン操作によってスクロールさせたい
Jqueryを読み込み
javascriptを書く、そしてボタンはcssで調整する

<div class="arrow"><a href="">▼<br />スクロール</a></div>
<script type="text/javascript">
var arrow_scroll = function(){
	var	scrl_tp = 0,
		scrl_flg = false,
		arrw = $('.arrow');

	var scroll = function(){
		scrl_tp += 2;
		$(window).scrollTop(scrl_tp);
		if( scrl_flg === true ){
			setTimeout(scroll, 1);
		}
	};

	arrw.mouseover(function(){
		scrl_flg = true;
		scrl_tp = $(window).scrollTop();
		setTimeout(scroll, 1);
		return false;
	}).mouseup(function(){
		scrl_flg = false;
		clearTimeout(scroll);
	}).mouseleave(function(){
		scrl_flg = false;
		clearTimeout(scroll);
	});
};

$('document').ready(function(){
	arrow_scroll();
});
</script>
.arrow {width:90px;height:90px;
	cursor: pointer;
	position: fixed;
	top: 20px;
	right: 20px;
	padding:0;font-size:14px;line-height:20px;
	border-radius: 50px;color:#ffffff;
	background: #0072ff;
	text-align:center;
}
.arrow a{width:90px;height:90px;border-radius: 50px;display:block;background:#0072ff;color:#ffffff;text-decoration:none;}
.arrow a:hover{width:90px;height:90px;border-radius: 50px;display:block;background:#ff0c09;}

勉強させてもらったサイト

コメントを残す

メールアドレスが公開されることはありません。