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

J Query

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

1
<div class="arrow"><a href="">▼<br />スクロール</a></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
1
2
3
4
5
6
7
8
9
10
11
12
.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;}

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

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲