Use of the :not selector
<p>I have a website with different sections. I have jQuery to slide between these sections.
But now I have a link in a section which points to another section.</p>

<p><strong>HTML</strong>:</p>

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

<p><strong>jQuery:</strong></p>

<pre><code>// 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);
}
</code></pre>

<p>The problem is that if I click on the link <code>scrollOrderNow()</code> the page slides to the order page and than back to the section because the link is in that section.</p>

<p>Could you please help me figure this out?</p>

<p>Thank You!</p>
