0

私はさまざまなセクションを持つウェブサイトを持っています。これらのセクション間をスライドする jQuery があります。しかし、今では別のセクションを指すセクションにリンクがあります。

HTML :

    <div class="section" id="one">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="tow">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="ordernow">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="four">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>

jQuery:

// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
    $.scrollTo($(this), 800);
});

function scrollOrderNow(){
    $('html,body').animate({
        scrollTop: $("#ordernow").offset().top
    }, 1000);
}

問題は、リンクをクリックすると、scrollOrderNow()リンクがそのセクションにあるため、ページが注文ページにスライドし、セクションに戻ることです。

これを理解するのを手伝ってもらえますか？

ありがとう！

4

2 に答える 2

0

シングル クリック ハンドラーを使用して、セクション内でクリックされた要素に基づいて何をすべきかを決定できます。このためには、クラスを指定してクリック可能な要素を区別するのが最善です。

<div class="section" id="four">
  <div class="row">
      <p>This is some text</p>
  </div>
  <div class="row">
      <a href="#"><img src="button" class="scroll-to-order"/></a>
  </div>
</div>

クリック ハンドラ コード:

$('div.section').on('click', function(evt) {
    var $target = $(evt.target);

    if ($target.is('.scroll-to-order')) {
        // the image itself was clicked, so scroll to ordernow
        $('html,body').animate({
            scrollTop: $("#ordernow").offset().top
        }, 1000);
    } else {
        // something else inside the section was clicked, scroll to section
        $.scrollTo($(this), 800);
    }
});
于 2013-02-05T09:17:10.940 に答える
0

return false関数に配置する必要がありますscrollOrderNow()。

function scrollOrderNow(){
    $('html,body').animate({
        scrollTop: $("#ordernow").offset().top
    }, 1000);
    return false;
}

この方法では、リンクは反応せず、ハッシュは URL に追加されず、ページはそのまま残ります。

于 2013-02-05T08:56:15.963 に答える