单击“下一步”或“上一步”将使页面滚动

Question

首先请访问此提琴:http://jsfiddle.net/XvAR6/

现在向下滚动查看

这里我使用了jQuery ui。但是，这不是问题，主要问题是当我点击下一步或上一个页面自动滚动到顶部。我不想要滚动。我能找到解决办法吗?

下面是jQuery代码:

$("#tab1, #tab2").tabs({active: 1});
var all = $('.udtalelse').addClass("passiv");
var i = -1;
$('#prev').click(function() {
    ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function() {
    ctrlKunder( i = ++i % all.length );
}).click();
function ctrlKunder(ele) {
    all.removeClass("active").addClass("passiv");
    all.eq(ele).removeClass("passiv").addClass("active");
}

谢谢。

Answer 1

你的锚标记有#的href，因此当它们被点击时，页面的哈希被更新为#，导致滚动到顶部。阻止默认动作使其停止

$('#prev').click(function(e) {
    e.preventDefault();
    ...

Answer 2

在click的callback function中增加对event的引用。我们在这里用变量e引用它。然后使用e.preventDefault();停止默认的页跳转。

$('#prev').click(function(e) {
    e.preventDefault(); // add this
    ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function(e) {
    e.preventDefault(); // add this
    ctrlKunder( i = ++i % all.length );
}).click();

Answer 3

这里可以使用event.preventDefault()或return false;:

$('#prev').click(function(e) {
   e.preventDefault(); // return false;
   ctrlKunder( i = !i ? all.length - 1 : --i );
});
$('#next').click(function() {
   e.preventDefault(); // return false;
   ctrlKunder( i = ++i % all.length );
}).click();

您也可以使用return false;。return false;也会停止事件冒泡。

---

From the Docs:

描述:

如果调用此方法，则不会触发事件的默认动作。

Answer 4

你有两个选择。

将下一个/上一个链接中的href更改为javascript:;或

将点击事件更改为:

$('#prev').click(function(e) {
    ctrlKunder( i = !i ? all.length - 1 : --i );
    e.preventDefault();
});
$('#next').click(function(e) {
    ctrlKunder( i = ++i % all.length );
    e.preventDefault();
}).click();