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;
});