jquery - リンクをクリックした後に下にスライドする方法は?

Question

これは私が取り組んでいるウェブページです。

http://www.solved.com 私が望むのは、「状態」をクリックしたときです。 例: CA ページを下にスライドさせて結果を表示したい。結果が表示されるようになりましたが、下にスライドしません。

Answer 1

a name(またはid) とハッシュ タグを使用します (名前については、 http://www.w3schools.com/tags/att_a_name.aspを参照してください)。

たとえば、カリフォルニア州のリンクを

<a href="#california">(image)</a>

セクションには

<a name="california">California</a>

（またはできれば）

<a id="california">California</a>

(編集: これは組み込みのブラウザ機能を使用する簡単な方法です。スムーズなスライドのために jquery を使用したい場合は、これを調査するのに適したスクリプトのようです)

Answer 2

状態リンクの変更

<a href="#" id="AK">AK</a>
<a href="#" id="AL">AL</a>

に

<a href="#can_map" id="AK">AK</a>
<a href="#can_map" id="AL">AL</a>

即時スクロールが気に入らない場合は、https://github.com/kswedberg/jquery-smooth-scrollまたはその他のスムーズ スクロール プラグインをご覧ください。

Answer 3

次のように、スムーズなスクロールの素敵な効果を追加することもできます: リンクにクラスを追加します:

<a href="#can_map" class="anchor_class">Click me</a>

次に、jquery を使用して、クリック イベント ハンドラーで次を追加できます。

$('.anchor_class').click(function(){ 
    href = $(this).attr("href");
    $('html,body').animate({scrollTop: $(href).offset().top};
    return false;
});