0

クラス「enablescroll」を持つすべてのアンカーリンクに適用されるようにこのコードを編集してから、それぞれのターゲットIDにスクロールする方法を誰か教えてもらえますか?

今私は持っています：

<script>
$(document).ready(function() {
    $('.enablescroll').click(function(){  //when links with class "enablescroll" clicked
        $('.pagecontainer').animate({  //animate this container not the viewport
            scrollTop: $("#target").offset().top  //scroll to the div with id "target"
        }, 1000);
    });
});
</script>

これは明らかに、「ターゲット」という名前のスクロール先が 1 つある場合にのみ機能します。しかし、次のように、それぞれ異なるターゲット ID を持つ 50 個のリンクがあります。

<div class="pagecontainer">

<a href="#section1" class="enablescroll">Section 1</a>
<a href="#section2" class="enablescroll">Section 2</a>
<a href="#section3" class="enablescroll">Section 3</a>
<a href="#section4" class="enablescroll">Section 4</a>
<a href="#section5" class="enablescroll">Section 5</a>

....

<div id="section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros ipsum, ullamcorper in tincidunt ut, fringilla vel risus. Cras purus arcu, vulputate eu tempus sit amet, gravida et diam. Nulla commodo aliquam metus.</div>

<div id="section2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros ipsum, ullamcorper in tincidunt ut, fringilla vel risus. Cras purus arcu, vulputate eu tempus sit amet, gravida et diam. Nulla commodo aliquam metus.</div>

<div id="section3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros ipsum, ullamcorper in tincidunt ut, fringilla vel risus. Cras purus arcu, vulputate eu tempus sit amet, gravida et diam. Nulla commodo aliquam metus.</div>

<div id="section4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros ipsum, ullamcorper in tincidunt ut, fringilla vel risus. Cras purus arcu, vulputate eu tempus sit amet, gravida et diam. Nulla commodo aliquam metus.</div>

<div id="section5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros ipsum, ullamcorper in tincidunt ut, fringilla vel risus. Cras purus arcu, vulputate eu tempus sit amet, gravida et diam. Nulla commodo aliquam metus.</div>

</div>

各リンクのターゲットを取得して、そのスクロール スクリプトに割り当てるにはどうすればよいですか? 構文は次のようなものだったのを覚えています：

$(this.getAttribute("href"))

しかし、残りの構文がどのようになっているのかわかりません。

ありがとう。

4

0 に答える 0