ページ内でボタン操作によってスクロールさせたい
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;}