スムーススクロール
aタグでかつhrefの中身が＃からはじまっているものに対してと指定したい
→
属性セレクタ
/* title 属性を持つ <a> 要素 */
a[title] {
color: purple;
}
/* href が "https://example.org" と一致する <a> 要素 */
a[href="https://example.org"] {
color: green;
}
/* href に "example" を含む <a> 要素 */
a[href*="example"] {
font-size: 2em;
}
/* href が "org" で終わる <a> 要素 */
a[href$=".org"] {
font-style: italic;
}
今回はこのページのこれを使う
[attr^=value]
>attr という名前の属性の値が value で始まる要素を表します。
こうなる
「べき」記号をつかう
$(function(){
$('a[href^="#"]').on('click',function(){
});
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="smooth.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<header id="top">
<h1>スムーススクロール</h1>
</header>
<div>
<a class="green" href="#top">トップへ戻る</a>
</div>
<script>
$(function(){//するする戻る
$('a[href^="#"]').on('click',function(){
$('html,body').animate({scrollTop:0},500,"swing");
return false;
});
});
</script>
</body>
</html>
windowではだめで'html,body'と指定するらしい
だけどこれだとトップに戻るボタンにしか使えない
ちゃんとターゲットの位置にくるようにしてやりたい
--->smooth.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="smooth.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<header id="top">
<h1>スムーススクロール</h1>
<p><a href="#conta">goto h2</a></p>
</header>
<container id="conta">
<h2>スムーススクロール</h2>
</container>
<div>
<a class="green" href="#top">トップへ戻る</a>
</div>
<script>
$(function(){//するする戻る
$('a[href^="#"]').on('click',function(){
var href= $(this).attr("href");//いまクリックされたthisのアトリ（属性）であるhrefの中身を入れている（今回は#top）
var target = $(href == "#" || href=="" ? "href":href);//var target = $(href);がやりたい
var pos = target.offset().top;
$('html,body').animate({scrollTop:pos},500,"swing");
return false;
});
});
</script>
</body>
</html>
解説
var href= $(this).attr("href");
いまクリックされたthisのアトリ（属性）であるhrefの中身を入れている（今回は#top）
var target = $(href == "#" || href=="" ? "href":href);
var target = $(href);がやりたい
つまり
var target = #topとなってほしい
var pos = target.offset().top;
targetでheaderをえらんでいる
headerの要素が上から何ピクセルにいるんですか
を格納
先ほど0にしていたのを「その要素の位置にしてね」
return false;
aタグのなんとかがなんとかしないように
つけておくと無難らしい
var target = $(href == "#" || href=="" ? "href":href);
三項演算子
条件式 ? true : false
|| href==""はなくても大丈夫
おまじない的らしい
ただうっかりリンク先をダミーで＃のままにしてるとこういうの通すとエラーがでるので
それ防止でこの前半があるらしい
さっぱりわからないな
このへんは「後で使いまわす」ことを考え変数にvarをつけておくといいらしい。
animationの引数を変数にしておくのも手。
$(function(){//するする戻る
$('a[href^="#"]').on('click',function(){
var speed = 500;
var hogemove = "swing";
var href= $(this).attr("href");//いまクリックされたthisのアトリ（属性）であるhrefの中身を入れている（今回は#top）
var target = $(href == "#" || href=="" ? "href":href);//var target = $(href);がやりたい
var pos = target.offset().top;
$('html,body').animate({scrollTop:pos},speed,hogemove);
return false;
});
});
三項演算子部分はここだけ
href == "#" || href=="" ? "href":href
それを
$()のなかに入れている形
if(href="#" || href=""){
}
というのと同じ
