没有滚动或跳转的HTML锚链接

Question

我有各种链接,都有唯一的id是"伪锚".我希望它们影响url哈希值,并且点击魔法全部由一些mootools代码处理.但是,当我点击链接时,它们会自动滚动(或者在一个案例中滚动到顶部).我不想在任何地方滚动,但也需要我的javascript执行并在url更新中获得哈希值.

模拟的示例代码:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

因此,如果您点击"按钮1"链接,则网址可以是http://example.com/foo.php#button1

有没有人对此有任何想法？简单地使用一些javascript返回void会导致滚动,但也会杀死我的javascript(虽然我可以使用onclick来解决这个问题)但更重要的是,可以防止url中的哈希值发生变化.

Answer 1

锚链接的重点是将页面滚动到特定点.因此,如果您不希望发生这种情况,则需要附加onclick处理程序并返回false.即使只是将其添加为属性也应该有效:

<a href="#button1" id="button1" onclick="return false">button 1</a>

上述效果的一面是URL本身不会改变,因为返回false将取消该事件.因此,由于您希望URL实际更改,您可以将window.location.hash变量设置为您想要的值(这是您可以更改的URL的唯一属性,而无需浏览器强制重新加载).您可以附加一个事件处理程序并调用类似的东西,window.location.hash = this.id虽然我不确定mootools如何处理事件.

(您还需要所有ID都是唯一的)

Answer 2

您可以使用以下代码来避免滚动:

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

Answer 3

我可能错过了一些东西,但为什么不给它们不同的ID呢？

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

或者你喜欢的任何惯例.

Answer 4

还， preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }