【发布时间】：2014-09-13 18:08:33
【问题描述】：
我想使用 html 和 jQuery 在标题之间准备一个平滑的滚动效果。通过按下“下一个”按钮，用户将移动到最近的下一个标题。
简化我的代码如下所示：
<div class="article-content">
<div class="title">
<a href="#" id="next">next</a>
<h2>Title1</h2>
</div>
some text goes here
<div class="title">
<a href="#" id="next">next</a>
<h2>Title2</h2>
</div>
<div class="title">
<a href="#" id="next">next</a>
<h2>Title3</h2>
</div>
</div>
我尝试使用下面的jQuery代码，但它不起作用：
$("#next").click(function() {
var next;
next = $(this).parent().next().find(".title");
$('html,body').animate({ scrollTop: next.offset().top
}, 1000);
});
【问题讨论】：
-
同一页面中不能有多个具有相同 id 的元素。您应该使用
data-id或class来区分您的“下一个”链接。 -
可能存在冲突。尝试将类分配给这些按钮，而不是使用 id。
-
哦，是的 :) 我已经在链接中添加了类，但它仍然不起作用：/
标签： javascript jquery css class scroll