How do I stop button from scrolling down to Contact form?

Question

I'm not a coder or developer. I'm trying to save us money, and fix a problem with my wife's responsive WordPress site.

We hired an SEO guy who said he could also write custom JavaScript for us. He created a call to action button that behaves differently between desktop (scroll to Contact Us form) and mobile (Call Now).

I noticed he was duplicating the function, in the header custom HTML, to scroll to form on both function calls of the button. I changed his custom code in the header to use href="tel:xxxxxxxxxx" .

It still scrolls to the contact form. I used the same HTML for our contact info in the footer, and that works fine. I'm stumped.

Please help.

Here is the code he wrote:

JavaScript:

setTimeout(function() {

  window.scrollTo(0, 0);
}, 1);

jQuery(function($){

  function scrollToForm() {
    $([document.documentElement, document.body]).animate({
          scrollTop: $('#contact-form').offset().top
      }, 1000);
  }

  if (window.location.hash == '#contact-form'){
    setTimeout(function(){
        scrollToForm();
    }, 1000);
  }

  $('.top-cta-btn').click(function(e){   
    scrollToForm();

    if (window.location.href == 'https://www.sironatherapies.com/#contact-form' || 
'https://www.sironatherapies.com/') {
      return false;
    }
  });

});

Custom HTML Header:

<style>
    .top-cta-btn {
        background: #dd9f27;
    padding: 13px;
    color: #000;
        cursor: pointer;
    }
    .top-cta-btn:hover {
        color: #fff;
    }

    @media (min-width: 320px) and (max-width: 767px) {

        .header_bottom_right_widget_holder {display: block !important}
        .top-cta-container {display: none}
        .top-cta-container-mobile {display: block;
    margin-bottom: 30px;
    margin-top: 35px;}
        .testimonials-section {display: none}

        .side_menu_button {display: none;}
        .vc_custom_1454330137581 {display: none;}
    }
    @media only screen and (max-width: 1000px){
        .q_logo a {
            left: -80%;
            width: auto!important;
        }
    }
    @media only screen and (min-width: 768px) {
        .top-cta-container {display: block}
        .top-cta-container-mobile {display: none}
    }

</style>
<div class="top-cta-container">
    <a class="top-cta-btn" href="/#contact-form">Book an Appointment Today</a>
</div>

<div class="top-cta-container-mobile">
    <a class="top-cta-btn" href="tel:xxxxxxxxxx">Call Now</a>
</div>

Answer 1

You need to change the CSS selector in the Call-to-Action event handler, in order to target only the Desktop CTA button and not the mobile one:

Now:

  $('.top-cta-btn').click(function(e){   
    scrollToForm();
    ...

Should be:

  $('.top-cta-container .top-cta-btn').click(function(e){   
    scrollToForm();
    ...

This way, you are limiting the scrolling, only when the element .top-cta-btn that is inside the .top-cta-container element (Desktop/Contact Form link) is clicked.

The mobile CTA button will not get triggered since it is inside another element, the .top-cta-container-mobile .

---

Also, there's no need for the duplicate code. You can remove it.