Question

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.

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

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

Could you please help me figure this out?

Thank You!

Answer 1

You can use a single click handler and determine what to do based on which element was clicked inside the section. For this, it’s best to distinguish the clickable element by giving it a class:

<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>

The the click handler code:

$('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);
    }
});