ボタンへのjQueryアンカーはWordPressでは機能しません

Question

私は検索結果を提供するボタンを持っていますが、フロントエンドからボタンをクリックするとスクロールしたいと思っています。私はこのコードを追加しましたが、うまく動作しません。これはページhttp://gymjoe.ca/gyms/ ..へのリンクです。今すぐ検索ボタンです。私は私があなたのコード内ancfootという名前のアンカーを見つけることができませんでしたページの下部

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

Answer 1

でアンカーのIDを作成し使用したコードの下に、しかし私はあなたのためにこれを修正するにはどのように2つの方法があります。

まず、ボタンのクラスは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>