ページ内リンクにおいてid以外を利用する方法

Question

ページ内リンクについて、id以外の要素でリンクさせることは可能でしょうか。
例えば二つ目のh2タグに飛ばしたい　など

Comments

[m.ts10806]

「可能です」だけで良いですか？
質問は調べたこと試したことをきちんと記載し、得たい回答が得られる質問の仕方にしてください。
質問は編集できますので

[x_x]

idを振ったほうが何かと都合がいいと思うのですが、できない理由はあるのでしょうか？

Answer 1

HTMLの機能にはないのでjsで処理することになります

jQueryサンプル

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('a[data-target]').on('click',function(e){
    e.preventDefault();
    var pos=$($(this).data("target")).offset().top;
    $('html,body').animate({scrollTop: pos},0);
  });
});
</script>
<style>
h2{background-Color:yellow}
.dummy{height:999px}
</style>
<ul>
<li><a href="#" data-target="h2:eq(0)">1個目のh2</a></li>
<li><a href="#" data-target="h2:eq(1)">2個目のh2</a></li>
<li><a href="#" data-target="h2:eq(2)">3個目のh2</a></li>
</ul>
<div class="dummy">dummy</div>
<h2>1個目</h2>
<div class="dummy">dummy</div>
<h2>2個目</h2>
<div class="dummy">dummy</div>
<h2>3個目</h2>
<div class="dummy">dummy</div>

Comments

[yambejp]

念の為sampleつけておきます

[yasutomi]

animateを使用しているなら
数値が0なのは間違っています。
(0だとanimateにする意味がない。500の部分は任意の数値)

$('html,body').animate({scrollTop: pos}, 0);
↓
$('html,body').animate({scrollTop: pos}, 500);