单击下一个或上一个使页面滚动答案

【问题标题】：Clicking next or previous makes the page scroll单击下一个或上一个使页面滚动
【发布时间】：2016-02-09 19:43:07
【问题描述】：

现在向下滚动查看。

这里我使用了 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");
}

谢谢。

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

您的锚标记具有# 的href，因此当它们被单击时，页面的哈希值会更新为#，从而导致滚动到顶部。阻止默认操作使其停止。

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

【讨论】：

感谢您的精彩解释

【解决方案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();

【讨论】：

【解决方案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; 也会停止事件冒泡。

来自文档：

说明：

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

【讨论】：

【解决方案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();

【讨论】：