Javascript 如何停止按钮向下滚动到联系人窗体？_Javascript_Html

Javascript 如何停止按钮向下滚动到联系人窗体？

javascript html

Javascript 如何停止按钮向下滚动到联系人窗体？,javascript,html,Javascript,Html,我不是一个程序员或开发者。我正在努力为我们省钱，并修复我妻子的响应WordPress网站的一个问题我们雇佣了一个SEO人员，他说他还可以为我们编写定制JavaScript。他创建了一个call to action按钮，该按钮在桌面（滚动至Contact Us表单）和移动（call Now）之间的行为有所不同我注意到他在复制标题自定义HTML中的函数，以便在按钮的两个函数调用中滚动到表单。我将标题中的自定义代码更改为使用href=“tel:xxxxxxxxx” 它仍然会滚动到联系人窗体。我在页

我不是一个程序员或开发者。我正在努力为我们省钱，并修复我妻子的响应WordPress网站的一个问题

我们雇佣了一个SEO人员，他说他还可以为我们编写定制JavaScript。他创建了一个call to action按钮，该按钮在桌面（滚动至Contact Us表单）和移动（call Now）之间的行为有所不同

我注意到他在复制标题自定义HTML中的函数，以便在按钮的两个函数调用中滚动到表单。我将标题中的自定义代码更改为使用

href=“tel:xxxxxxxxx”

它仍然会滚动到联系人窗体。我在页脚中使用了相同的HTML作为我们的联系信息，这很好。我被难住了

请帮忙

以下是他写的代码：

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

});

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

自定义HTML标题：

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

});

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


.顶级cta btn{
背景#dd9f27；
填充：13px；
颜色：#000；
光标：指针；
}
.顶级cta btn：悬停{
颜色：#fff；
}
@介质（最小宽度：320px）和（最大宽度：767px）{
.header\u bottom\u right\u widget\u holder{display:block！important}
.top cta容器{显示：无}
.top cta容器移动{显示：块；
边缘底部：30px；
页边距顶部：35px；}
.推荐部分{显示：无}
.side_菜单_按钮{显示：无；}
.vc_custom_1454330137581{显示：无；}
}
@仅介质屏幕和（最大宽度：1000px）{
.q_标志a{
左-80%；
宽度：自动！重要；
}
}
@仅介质屏幕和（最小宽度：768px）{
.top cta容器{显示：块}
.top cta容器移动{显示：无}
}

您需要更改Call to Action事件处理程序中的CSS选择器，以便只针对桌面CTA按钮，而不是移动按钮：

现在：

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

});

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

$（'.top-cta-btn'）。单击（函数（e）{
滚动形式（）；
...

应该是：

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

});

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

$（'.top-cta container.top-cta btn'）。单击（函数（e）{
滚动形式（）；
...

这样，只有在单击

.top cta container

元素（桌面/联系人表单链接）内的元素

.top cta btn

时，才限制滚动

移动CTA按钮不会被触发，因为它位于另一个元素中，

.top CTA container mobile

此外，不需要重复的代码。您可以删除它。

您需要更改调用操作事件处理程序中的CSS选择器，以便只针对桌面CTA按钮，而不是移动按钮：