首页 文章

如果单击一个触发JavaScript的链接，如何阻止网页滚动到顶部？

提问于
浏览 次
124

当我有一个与jQuery或JavaScript事件连接的链接，例如：

<a href="#">My Link</a>

如何防止页面滚动到顶部？当我从锚点中删除href属性时，页面不会滚动到顶部，但链接似乎不是可点击的 .

javascript html

15 回答

  • 186

    您需要阻止发生单击事件（即导航到链接目标）的默认操作 .

    有两种方法可以做到这一点 .

    选项1：event.preventDefault（）

    调用传递给处理程序的事件对象的 .preventDefault() 方法 . 如果你使用jQuery来绑定你的处理程序，那么该事件将是jQuery.Event的一个实例，它将是.preventDefault()的jQuery版本 . 如果您使用 addEventListener 绑定处理程序，它将是Event和.preventDefault()的原始DOM版本 . 无论哪种方式都可以满足您的需求 .

    例子：

    $('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

    选项2：返回false;

    In jQuery：

    从事件处理程序返回false将自动调用event.stopPropagation（）和event.preventDefault（）

    因此，使用jQuery，您也可以使用此方法来防止默认链接行为：

    $('#ma_link').click(function(e) {
     doSomething();
     return false;
});

    如果你正在使用原始DOM事件，这也适用于现代浏览器，因为HTML 5规范规定了这种行为 . 但是，旧版本的规范没有，因此如果您需要与旧版浏览器的最大兼容性，则应该明确地调用 .preventDefault() . 有关规格详细信息，请参见event.preventDefault() vs. return false (no jQuery) .

    回复于
  • 149

    对于崩溃的Bootstrap 3，如果未在锚点上指定数据目标并依赖href来确定目标，则将阻止该事件 . 如果您使用数据目标，则需要自行阻止该事件 .

    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>
    回复于
  • 0

    从您正在调用的代码返回false将起作用，并且在许多情况下是首选方法，但您也可以这样做

    <a href="javascript:;">Link Title</a>

    当涉及到SEO时，它实际上取决于你的链接将被用于什么 . 如果您打算实际使用它链接到其他一些内容，那么我同意理想情况下你会想要一些有意义的东西但是如果你使用链接用于功能目的可能像Stack Overflow那样用于帖子工具栏（粗体，斜体，超链接）等等）然后它可能没关系 .

    回复于
  • 0
    <a onclick="yourfunction()">

    这样可以正常工作 . 无需添加href =“＃”

    回复于
  • 26

    创建一个包含两个链接的页面 - 一个在顶部，一个在底部 . 单击顶部链接时，页面必须向下滚动到底部链接所在页面的底部 . 单击底部链接时，页面必须向上滚动到页面顶部 .

    回复于
  • 6

    此外，您可以在 onclick 属性中使用 event.preventDefault .

    <a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

    无需编写exstra click事件 .

    回复于
  • 2

    你应该改变

    <a href="#">My Link</a>

    至

    <a href="javascript:;">My Link</a>

    这样，当单击链接时，页面将不会滚动到顶部 . 这比使用href =“＃”更清晰，然后阻止默认事件运行 .

    我对this question的第一个答案有充分的理由，如果被调用函数抛出错误， return false; 将不会执行，或者您可以将 return false; 添加到 doSomething() 函数然后忘记使用 return doSomething();

    回复于
  • 11

    一种简单的方法是利用此代码：

    <a href="javascript:void(0);">Link Title</a>

    此方法不会强制页面刷新，因此滚动条保持不变 . 此外，它允许您以编程方式更改onclick事件并使用jQuery处理客户端事件绑定 .

    由于这些原因，上述解决方案优于：

    <a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

    当且仅当myClickHandler方法没有失败时，最后一个解决方案将避免滚动跳转问题 .

    回复于
  • 3

    您可能想检查您的CSS . 在这里的示例中：https://css-tricks.com/the-checkbox-hack/有 position: absolute; top: -9999px; . 这在Chrome上尤其愚蠢，因为 onclick="whatever" 仍会跳转到点击元素的绝对位置 .

    删除 position: absolute; top: -9999px; ，对于 display: none; 可能会有所帮助 .

    回复于
  • 0

    调用该函数时，按 return false 示例：

    <input  type="submit" value="Add" onclick="addNewPayment();return false;">
    回复于
  • 7

    首先链接到比页面顶部更合理的东西 . 然后取消默认事件 .

    参见pragmatic progressive enhancement的规则2 .

    回复于
  • 0

    如果您只需更改 href 值，则应使用：

    <a href="javascript:void(0);">Link Title</a>

    我刚刚提出的另一个简洁的解决方案是使用jQuery来停止发生单击操作并导致页面滚动，但仅限于 href="#" 链接 .

    <script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>
    回复于
  • 0

    您可以将href设置为 #! 而不是 #

    例如，

    <a href="#!">Link</a>

    点击时不会进行任何滚动 .

    Beware! 这仍然会在浏览器中添加一个条目's history when clicked, meaning that after clicking your link, the user' s后退按钮不会将它们带到以前的页面 . 出于这个原因，最好使用.preventDefault()方法，或两者结合使用 .

    这是一个小提琴，说明了这一点（只需将浏览器缩小，直到获得滚动条）：
    http://jsfiddle.net/9dEG7/

    对于规范书呆子 - 为什么这样做：

    此行为在HTML5规范下指定Navigating to a fragment identifier部分 . 带有 "#" 的href的链接导致文档滚动到顶部的原因是此行为被显式指定为处理空片段标识符的方式：

    2.如果fragid是空字符串，则文档的指示部分是文档的顶部

    使用 "#!" 的href只是因为它避免了这个规则 . 's nothing magic about the exclamation mark - it just makes a convenient fragment identifier because it'与典型的fragid明显不同，并且不太可能匹配页面上 id 或 name 的元素 . 确实，我们可以在哈希之后放几乎任何东西;唯一赢得't suffice are the empty string, the word ' top'的碎片，或与页面上元素的 name 或 id 属性匹配的字符串 .

    更确切地说，我们只需要一个片段标识符，它将使我们在以下算法中进入步骤8，以便从fragid中确定文档的指示部分：

    将URL解析器算法应用于URL，并将fragid作为生成的已解析URL的片段组件 . 如果fragid是空字符串，则文档的指示部分是文档的顶部;在这里停止算法 . 令fragid字节是百分比解码fragid的结果 . 令解码的fragid是将UTF-8解码器算法应用于fragid字节的结果 . 如果UTF-8解码器发出解码器错误，则中止解码器，而是跳转到标记为no decoding fragid的步骤 . 如果DOM中的元素具有完全等于解码的fragid的ID，则树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法 . 没有解码的fragid：如果DOM中有一个元素具有name属性，其值完全等于fragid（未解码的fragid），则树顺序中的第一个这样的元素是文档的指示部分;在这里停止算法 . 如果fragid是字符串top的ASCII不区分大小写匹配，则文档的指示部分是文档的顶部;在这里停止算法 . 否则，文档中没有指明的部分 .

    只要我们点击步骤8并且文档中没有指示部分，就会出现以下规则：

    如果没有指示的部分......那么用户代理必须什么都不做 .

    这就是浏览器不滚动的原因 .

    回复于
  • 0

    你也可以像这样写： -

    <a href="#!" onclick="function()">Delete User</a>
    回复于
  • 3

    试试这个：

    <a href="#" onclick="return false;">My Link</a>
    回复于

相关问题