单击后阻止页面滚动？

Question

单击链接后Click Me,页面将滚动回到顶部.我不想要这个.怎么解决它？

示例: http ://jsfiddle.net/Y6Y3Z/

滚动条:

    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){
        }
    }

Answer 1

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

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

    ...

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

Answer 2

您只需要在HTML代码上将"#"更改为"javascript:void(0)":

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

另一个解决方案是在"#"后添加一个"/":

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

Answer 3

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