点击后防止页面滚动？答案

【问题标题】：Prevent page scroll after click?点击后防止页面滚动？
【发布时间】：2011-10-08 15:48:13
【问题描述】：

点击链接Click Me 后，页面滚动回到顶部。我不想要这个。怎么解决？

滚动条：

    function myalert() {
        var result = true;
        //var hide = $('.alert').fadeOut(100);
        //var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Are you sure you want to delete this item?<div class="clear"></div><button class="ok">no</button><button class="cancel">yes</button></div>');
        var link = this;
        $('body').append($alertDiv);
        $('.ok').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(true, link);
        });
        $('.cancel').click(function () {
            $('.alert').fadeOut(100);
            $('#appriseOverlay').css('display', 'none');
            callback(false, link);
        });
        $alertDiv.fadeIn(100);
        $('#appriseOverlay').css('display', 'block');
        return result;
    };
$('.click').click(myalert);
    function callback(result, link) {
        //
        if(result){
        }
    }

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您只需将 HTML 代码中的“#”更改为“javascript:void(0)”即可：

<a href="javascript:void(0)" class="click">Click Me</a>

另一种解决方案是在“#”之后添加一个“/”：

<a href="#/" class="click">Click Me</a>

【讨论】：

天啊，我爱你。那个/东西摇滚！我刚刚告诉其他 5 位开发人员和 Gilberto，您现在有 3 家开发公司正在亲吻您的脚^^
或者您可以简单地从那里删除 href 属性。两者都可以工作
这是最简单的方法。谢谢。
2021 完美运行 - href="#/" - 谢谢！

【解决方案2】：

它会到页面顶部的原因是因为你的锚标签有一个哈希符号作为href。哈希语法允许您引用文档中的命名锚点，链接将您带到文档中的那个位置。当您单击锚标记并且 href 引用不存在的命名锚时，锚标记的默认操作是转到页面顶部。要防止这种情况发生，请通过从处理程序返回 false 或在事件上使用 preventDefault 来取消默认操作。

function myalert(e) {
    e.preventDefault(); // <-- prevent the default action

    ...

    return false; // <-- alternative way to prevent the default action.
};

【讨论】：

不应使用return false;，除非您打算停止事件冒泡。请参阅@rodneyrehm 的回答。
@Sparky672 - 绝对正确，但在我观察到的几乎所有此类行为的情况下，防止事件冒泡也是正确的。
这是什么e这里
e 是event 对象

【解决方案3】：

简单地阻止默认函数（跳转到#marker）执行：http://jsfiddle.net/Y6Y3Z/1/

【讨论】：