ページ内リンクの作り方
ページ内でリンクを作る方法について2パターンを紹介します。
素材
ヘッダー、メイン、フッターに分かれています。
メインの中に、SERVICEとABOUTのページがあります。
画面
HTML
<!DOCTYPE html>
<html>
<head>
<!-- リセットCSSの読み込み -->
<link rel="stylesheet" type="text/css"
<link rel="stylesheet" href="style.css">
<!-- jQueryの読み込み -->
</script>
<script src="query.js"></script>
</head>
<body>
<header>
<ul>
<li>SERVICE</li>
<li>ABOUT</li>
</ul>
</header>
<main>
<div class="service">
<h1>SERVICE</h1>
</div>
<div class="about">
<h1>ABOUT</h1>
</div>
</main>
<footer>
<h1>All rights reserved</h1>
</footer>
</body>
</html>
CSS
header {
background-color: rgba(0,0,0,0.2);
height: 60px;
}
ul {
height: 100%;
width: 20%;
}
li {
list-style: none;
float: left;
margin: 15px 10px;
cursor: pointer;
}
main {
background-color: rgba(0,0,0,0.1);
height: 2000px;
}
.service {
height: 40%;
text-align: center;
font-size: 40px;
}
.about {
height: 60%;
text-align: center;
font-size: 40px;
}
footer {
height: 60px;
background-color: rgba(0,0,0,0.2);
}
これを使って、ヘッダーの文字をクリックすると、それぞれのページに飛ぶという、ページ内リンクを実装していきます。
HTMLを用いた方法
最初に、HTMLを用いて、ヘッダーのSERVICEをクリックしたら、SERVICEのページに飛ぶようにする方法を紹介します。
リンク元
画面
HTML
<header>
<ul>
<li><a href="#service">SERVICE</a></li>
<li>ABOUT</li>
</ul>
</header>
リンク先
画面
HTML
<main>
<div class="service">
<a id="service"></a>
<h1>SERVICE</h1>
</div>
<div class="about">
<h1>ABOUT</h1>
</div>
</main>
ポイントは、
リンク元に、
<a href="#service"></a>
を記述して
リンク先に、
<a id="service"></a>
を記述するということです。
リンク先に指定したidを、リンク元のhrefで指定してあげて、クリックしたら飛べるようにしています。
jQueryを用いた方法
次にjQueryを用いた方法を紹介します。
画面
HTML
<header>
<ul>
<li id="service">SERVICE</li>
<li>ABOUT</li>
</ul>
</header>
SERVICEが入っているli要素に、serviceというidをつけています。
jQuery
$(function(){
$('#service').click(function(){
$('html').animate({scrollTop: 60})
})
})
idがserviceの要素をクリックした時のイベントで、htmlを取得して、scrollTopが60の位置にanimateさせています。
scrollTopは、画面上部からの位置です。
最後に
aboutに移動するページ内リンクを、jQueryを用いて作っていこうと思います。
HTML
<header>
<ul>
<li id="service">SERVICE</li>
<li id="about">ABOUT</li>
</ul>
</header>
li要素に、id=aboutを追加して、
jQuery
$('#about').click(function(){
})
idがaboutの要素をクリックした時のイベントを作成します。
$('#about').click(function(){
$('html').animate({scrollTop: })
})
そして、htmlをanimateさせます。
scrollTopの位置を決めます。
この時、⌘ + Shift + 4 でスクリーンショットのマークを出現させて、クリック&スクロールさせると、画面の長さが表示されるので便利です。
画面最上部からABOUTまでの長さが大体わかったので、scrollTopの値を入力します。
$('#about').click(function(){
$('html').animate({scrollTop: 850})
})
完成です！
