jQuery对话框自动滚动到底部

Question

我有一个弹出式的对话框，其中包含图片和信息。每当我启动该对话框时，页面会自动滚动到底部，并且在所有信息加载完毕之前无法向上滚动。我不知道为什么会这样。你有什么想法吗？

$( "#dialog-view" ).dialog({
        resizable: false,
        width:'auto',
        fluid: true,
        modal: true,
        autoOpen: false,

        buttons: 
            {
    "Done": function() 
    {
      $("#dialog-view").dialog("close");
    }
  }
});  

- Derek

---

看看这个链接（https://dev59.com/MXRA5IYBdhLWcg3w_DHF），看看有没有帮助的内容？ - cssyphus

你看过preventDefault了吗？我觉得这个可以防止屏幕滚动。 - m33bo

你怎么添加呢？我不太擅长 JQuery 编程。 - Derek

Answer 1

我曾经遇到类似的问题，它让我疯狂！我正在寻找一个带有 # 锚点，并搜索一个强制滚动到窗口底部的Javascript操作。

结果发现，我加载的AJAX代码在底部有一个锚点（指向我的网站的链接）。 Web浏览器呈现代码时会跳转到页面上唯一的锚点。

为了消除这个问题，我给这个锚点添加了一个负的tabindex：

<a href="http://www.keppiehed.com" tabindex="-1">Keppiehed.com</a>

根据 如何忽略HTML元素的tabindex? 的第一个答案, W3C HTML5 规范支持负的tabindex值。

我知道这篇文章有点旧了，但我希望它能帮助你和其他人解决这个难以诊断的问题！

- Sablefoste

---

@FahadIshaque，我很高兴它对你有帮助！这就是为什么我经常去 StackOverflow，并在我花费一些时间研究它们后回答甚至旧问题。 - Sablefoste

看到这个答案后，我脑海中灵光一闪，发现我的加载内容中也有一个链接导致滚动到底部。感谢您的洞察力！设置tabindex解决了我的问题。 - cellen

Answer 2

你的对话框可能定位不正确，使用API中的Position或我使用的解决方案来设置距离顶部的距离，像这样：

$("#dialog").dialog({ position: [($(window).width() / 2) - (dialogWidth / 2), 150] });
$("#dialog").dialog("open");

- Bogdan Trusca

Answer 3

如果您不想为所有a标签添加tabindex属性，可以参考@Sablefoste上面的答案。

$('#my-dialog-id').find('a').attr('tabindex',-1);

- 111