点击链接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){
}
}
答案 0 :(得分:8)
它到达页面顶部的原因是因为你的锚标签有一个哈希符号作为href。哈希语法允许您引用文档中的命名锚点,链接将您带到文档中的该位置。单击锚标记并且href引用不存在的命名锚点时,默认操作是转到页面顶部。要防止此操作,请通过从处理程序返回false或在事件上使用preventDefault
来取消默认操作。
function myalert(e) {
e.preventDefault(); // <-- prevent the default action
...
return false; // <-- alternative way to prevent the default action.
};
答案 1 :(得分:6)
您只需要更改&#34;#&#34;到&#34; javascript:void(0)&#34;在HTML代码上:
<a href="javascript:void(0)" class="click">Click Me</a>
另一种解决方案是添加&#34; /&#34;在&#34;#&#34;:
之后<a href="#/" class="click">Click Me</a>
答案 2 :(得分:3)
只是阻止默认功能(跳转到#marker)执行:http://jsfiddle.net/Y6Y3Z/1/