Question

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

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

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

jQuery锚点到按钮将无法在WordPress

1 个答案: