按钮的 jQuery 锚点在 WordPress 上不起作用答案

【问题标题】：jQuery anchor to a button won't work on WordPress按钮的 jQuery 锚点在 WordPress 上不起作用
【发布时间】：2017-12-06 02:55:12
【问题描述】：

我有一个提供搜索结果的按钮，但我无法从前端控制它，我希望它在单击按钮后向下滚动。我添加了这段代码，但它不起作用。这是指向页面http://gymjoe.ca/gyms/ 的链接。它是现在搜索按钮。在我使用的代码下方，我为页面底部的锚点创建了一个 id

$(document).ready(function() {
    $(".btn btn-default a").click(function() {
        $.scrollTo('#ancfoot', 800, {easing:'elasout'});
    });
});

【问题讨论】：

标签： javascript jquery html wordpress frontend

【解决方案1】：

我在您的代码中找不到任何名为 ancfoot 的锚点，但是我有两种方法可以为您解决此问题。

首先，您的按钮有btn 和btn-default 类，没有a 标签。所以你的选择器是错误的，应该是这样的：$('.btn.btn-default')。

1) 目前您的表单在点击搜索按钮时提交。如果您不想提交它并且您将通过 JavaScript 获取表单值（用于 AJAX、DOM 操作，...），您将需要 .preventDefault()。这将阻止表单提交。

这将如下所示：

$(document).ready(function() {
    $(".btn.btn-default").click(function(event) {
        event.preventDefault();
        $.scrollTo('#ancfoot', 800, {easing:'elasout'});
    });
});

2) 如果您需要提交表单以供搜索，您可能不需要任何 JavaScript。将锚附加到表单的 action 属性应该这样做，如下所示：

<form action="http://gymjoe.ca/gyms/#ancfoot" role="form" id="form-map" class="form-map form-search" method="GET">
    <!-- your form --->
</form>

【讨论】：