javascript - :not 选择器的使用

Question

我有一个包含不同部分的网站。我有 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()，页面会滑到订单页面，而不是回到该部分，因为链接在该部分中。

你能帮我解决这个问题吗？

谢谢你！

Answer 1

你需要投入return false你的scrollOrderNow()职能。

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

这样，您的链接将不会做出反应，并且哈希不会附加到 URL，而将页面留在原处。

Answer 2

您可以使用单击处理程序并根据在该部分中单击的元素确定要执行的操作。为此，最好通过给它一个类来区分可点击元素：

<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);
    }
});