<body>

<div id="sample">
<ul>
<li class="btn_sample">サンプル1へ</li>
<li class="btn_sample">サンプル2へ</li>
<li class="btn_sample">サンプル3へ</li>
</ul>
<div class="content">サンプル1</div>
<div class="btn_top">ページ上部へ</div>
<div class="content">サンプル2</div>
<div class="btn_top">ページ上部へ</div>
<div class="content">サンプル3</div>
<div class="btn_top">ページ上部へ</div>
</div>
</body>
$(function() {

//ページ内スクロール
$(“.btn_sample”).click(function () {
var i = $(“.btn_sample”).index(this)
var p = $(“.content”).eq(i).offset().top;
$(‘html,body’).animate({ scrollTop: p }, ‘fast’);
return false;
});

//ページ上部へ戻る
$(“.btn_top”).click(function () {
$(‘html,body’).animate({ scrollTop: 0 }, ‘fast’);
return false;
});

});

classがbtn_sampleの画像をクリックすると同じナンバーの
classがcontentのトップに飛ぶ。
ナンバーはvar i = $(“.btn_sample”).index(this)と
var p = $(“.content”).eq(i).offset().top;で取得。

参考サイト様 http://www.finefinefine.jp/web/


コメントを残す

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)