WordPress单页网站Contact板块平滑滚动定位异常求助

我在WordPress搭建了单页网站，原本所有板块平滑滚动正常，拆分Contact板块为左右子板块并在左侧嵌入WPForms表单后，点击菜单Contact选项时，滚动会定位到表单的姓名输入框而非Contact板块顶部，其他板块滚动正常。已尝试禁用插件、调整min-height、修改offset值等方法，均未解决。

相关代码 #

HTML代码 #

<section id="about">
<div class="scroll-target">
<div class="about-section-left-side">
<h3>About</h3>
<paragraph>
and scrambtemore recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. I</paragraph></div>
<div class="about-section-right-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/test-image-for-website1.webp" alt="Website bouwen in Hoogvliet"></div>
</div>
</section>
<section id="webdesign">
<div class="scroll-target">
<div class="webdesign-section-left-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/try-image1.webp" alt="webdesign"></div>
<div class="webdesign-section-right-side">
<h3>Webdesign</h3>
<paragraph>
text em Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy te<paragraph></div>
</div>
</section>
<section id="onepager">
<div class="scroll-target">
<div class="onepager-section-left-side">
<h3>OnePager</h3>
<paragraph>
only five centuries, but also the leap into electronic typesetting, remaining essentially the 1500s, when an unknown printer to  Lorem Ipsum has been the industry's standard dummy te<paragraph></div>
<div class="onepager-section-right-side"><img src="https://webdesignmaster.eu/wp-content/uploads/2023/08/tekst-image3-for-webdesign.webp" alt="website bouwen"></div>
</div>
</section>
<section id="contact">
<div class="scroll-target">
<div class="contact-section-left-side">
<h3>Contact</h3>
[wpforms id="126"]

</div>
<div class="contact-section-right-side">
<div class="first-section">
<h2>WIJ HELPEN JOU GRAAG!</h2>
<h3>We zijn bereikbaar op:</h3>
<h4>
Maandag t/m vrijdag: 9:00 uur tot 20:00 uur
Zaterdag & zondag: 10:00 uur tot 18:00 uur</h4>
</div>
<div class="second-section">
<h1>Langskomen op afspraak!</h1>
<h2>Telefoonnumer: 06xxxxxx</h2>
</div>
</div>
</div>
</section>

CSS代码 #

.contact-section-right-side .second-section {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:1px solid #e7f5fb;
    max-width:600px;
    width:100%;
     height:200px;
    margin-top:2rem;
    position: relative; /* Add this to establish a positioning context for the pseudo-element */
    background-image: url('https://webdesignmaster.eu/wp-content/uploads/2023/08/contact-section-image.jpg'); 
  background-size: cover; 
  background-position: center center; /* Center the image within the container */
     
}

.contact-section-right-side .second-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: #4b5054; /* Lighter overlay color */
  opacity: 0.7; /*
 /* background-color: rgba(255, 255, 255, 0.8); /* Lighter overlay color with reduced opacity */
  z-index: 1; /* Place the overlay above the background image */
}


.second-section h1 {
    display:flex;
    justify-content:center;
    padding-top:-4.5rem;
    color:black;
}
.second-section h2 {
    display:flex;
    justify-content:center;
    margin-top:-1.25rem;
    color:#ffd978;
}

section {
     
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: black;
  min-height: 500px; /* Adjust this value as needed */
}




html {
  scroll-behavior: smooth;
} 

JavaScript代码 #

<script>

function scrollToSection(sectionId) {
  const section = document.getElementById(sectionId);
  const offset = sectionId === 'contact' ? -100 : 5; /* Adjust the offset as needed */
  if (section) {
    window.scrollTo({
      top: section.offsetTop + offset,
      behavior: 'smooth'
    });
  }
} 

</script>

header.php代码 #

<nav>
  <ul>
        
    <li><a href="https://webdesignmaster.eu/#about" onclick="scrollToSection('#about')">About</a></li>
    <li><a href="https://webdesignmaster.eu/#webdesign" onclick="scrollToSection('#webdesign')">Webdesign</a></li>
    <li><a href="https://webdesignmaster.eu/#onepager" onclick="scrollToSection('#onepager')">OnePager</a></li>
    <li><a href="https://webdesignmaster.eu/#contact" onclick="scrollToSection('#contact')">Contact</a></li>
  </ul>
</nav>  

解决方案 #

问题核心是WPForms加载后，表单的姓名输入框自动获取焦点，浏览器会强制滚动到聚焦元素位置，覆盖了自定义的平滑滚动效果。以下是有效解决方法：

方法1：阻止输入框自动聚焦 #

• 打开WPForms表单编辑器，找到姓名字段的高级选项，取消勾选「自动聚焦」（部分版本可能叫「默认聚焦」）。
• 如果插件无此选项，添加自定义JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const nameField = document.querySelector('#wpforms-126-field_0'); // 替换为你的表单字段实际ID
  if (nameField) {
    nameField.blur(); // 移除自动获取的焦点
  }
});

方法2：修正滚动逻辑并阻止锚点默认行为 #

导航链接同时使用了锚点href和onclick事件，浏览器会同时触发两种滚动行为，加上表单聚焦干扰导致定位混乱：

1. 修改header.php中的链接，去掉完整域名并阻止默认行为：

<li><a href="#about" onclick="scrollToSection('about'); return false;">About</a></li>
<li><a href="#webdesign" onclick="scrollToSection('webdesign'); return false;">Webdesign</a></li>
<li><a href="#onepager" onclick="scrollToSection('onepager'); return false;">OnePager</a></li>
<li><a href="#contact" onclick="scrollToSection('contact'); return false;">Contact</a></li>

2. 修正JavaScript函数，去掉sectionId的#前缀（getElementById不需要#）：

function scrollToSection(sectionId) {
  const section = document.getElementById(sectionId);
  const offset = sectionId === 'contact' ? -100 : 5;
  if (section) {
    window.scrollTo({
      top: section.offsetTop + offset,
      behavior: 'smooth'
    });
    // 强制移除页面上任何元素的焦点
    if (document.activeElement) document.activeElement.blur();
  }
}

方法3：使用CSS scroll-margin-top兜底 #

给Contact板块添加滚动偏移，确保浏览器锚点滚动定位到顶部：

#contact {
  scroll-margin-top: 120px; /* 根据你的页面布局调整数值 */
}

内容的提问来源于stack exchange，提问作者hovhannes999