スクロール系のアニメションをやってみよう
スクロールの書き方
どれだけスクロールしたのか取得してみよう
↓↓↓スクロールしてみて
使っているメソッド
.text(); => 指定した要素に文字列を入れることが出来る(元からあった文字は削除されます。)
.scrollTop(); => 指定した要素の上からのスクロール値
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p class="text">
<i class="fa fa-caret-right"></i>↓↓↓スクロールしてみて<br>
</p>
<div class="sample scroll">
<div id="scrollVal">スクロール値：</div><br>
<div id="scroll1">
scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>
</div>
</div>
</body>
</html>
$(function(){
$("#scroll1").scroll(function(){
$("#scrollVal").text("スクロール値："+$(this).scrollTop());
});
});
500以上スクロールされたら文字色を変えてみよう
↓↓↓スクロールしてみて
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p class="text">
<i class="fa fa-caret-right"></i>↓↓↓スクロールしてみて<br>
</p>
<div class="sample scroll2">
<div id="scrollVal2">スクロール値：</div><br>
<div id="scroll2">
scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>scroll!<br>
</div>
</div>
</body>
</html>
$(function(){
$("#scroll2").scroll(function(){
$("#scrollVal2").text("スクロール値："+$(this).scrollTop());
if($(this).scrollTop() > 500){
$(this).css("color","blue");
}else{
$(this).css("color","#777");
}
});
});
if()~って？
if分はもしも～ならば～するという条件分岐できる文です。
上記の場合なら、#scroll2のスクロール値が500pxを超えたらcssにblueを追加するとなります。
条件に当てはまらなかった場合は、else{}の中に記述します。
スクロールで一番上まで戻ってみよう
ボタンクリックで一番ページの一番上までスクロールで戻る
<html>
<head>
</head>
<body>
<div class="sample">
<button class="hover-btn" id="scroll3">一番上に！</button>
</div>
</div>
</body>
</html>
$(function(){
$("#scroll3").click(function(){
$("body,html").animate({
scrollTop : 0
},1000);
});
});