.NET MVC页面点击按钮滚动到表单后自动返回按钮位置的问题咨询

可能的原因与解决方案 #

1. 检查按钮类型是否为submit #

如果你的按钮是<button>标签，默认类型是submit，即使绑定了滚动函数，它依然会触发表单提交，导致页面重新加载（看起来像是回到原位置）。

解决方法：显式设置按钮类型为button：

<button type="button" onclick="scrollToContactForm(event)">滚动到表单</button>

2. 确认event.preventDefault()正确生效 #

确保你的函数正确接收event参数，并且preventDefault()没有被其他逻辑覆盖：

function scrollToContactForm(event) {
    // 先阻止默认行为
    event.preventDefault();
    // 执行滚动逻辑
    document.getElementById('contact-form').scrollIntoView({
        behavior: 'smooth'
    });
}

如果用jQuery绑定事件，注意确保preventDefault()在最前面执行：

$('.scroll-btn').on('click', function(e) {
    e.preventDefault();
    $('#contact-form').scrollIntoView({ behavior: 'smooth' });
});

3. 排查表单提交干扰 #

如果按钮位于<form>标签内，即使按钮类型是button，也要检查是否有其他脚本（比如MVC的非侵入式验证）触发了表单提交。可以临时移除<form>标签测试，看是否恢复正常。

4. 阻止事件冒泡避免冲突 #

如果页面存在其他绑定在父元素上的点击事件，可能会干扰当前滚动逻辑，可同时阻止事件冒泡：

function scrollToContactForm(event) {
    event.preventDefault();
    event.stopPropagation();
    document.getElementById('contact-form').scrollIntoView({ behavior: 'smooth' });
}

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