点击下一页或上一页让页面滚动

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;也会停止事件冒泡。

---

从文档：

说明：

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

Answer 4

你有两种选择。

更改href的下一个/上链接javascript:; OR

更改点击事件：

$('#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();