Javascript - 单击时阻止 JS 链接滚动回顶部？答案

【问题标题】：Javascript - Stop JS link from scrolling back to the top when clicked?Javascript - 单击时阻止 JS 链接滚动回顶部？
【发布时间】：2013-12-16 18:04:21
【问题描述】：

我正在使用这个 JS 在页面上显示/隐藏 DIV 以阻止页面变得太忙。问题是标题链接位于页面的一半，因此用户很可能会在页面下方滚动。然后单击链接会使浏览器再次滚动回顶部。有没有办法阻止这种情况？

唯一的好处是让显示的 div 可以很好地滚动或淡入，但这并不重要。谢谢！！

HTML 链接：

    <a href="#" onclick="toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

JS：

    function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }

【问题讨论】：

替换（使用href="javascript:;"）或删除href标签。
Use a blank link but not jump to top of page的可能重复
谢谢，这很有效，但现在它不是一个链接那么明显，因为光标显示的是文本荧光笔而不是手。有没有办法解决这个问题？
@Quentin 抱歉，我搜索时不知道如何措辞。我没有看到那个帖子。我认为这是一个JS问题。此外，该帖子并没有像 TGO 给出的答案那样解决问题。
好吧，我会做href="javascript:;"，因为那会给你帮助。或者你可以添加一些 CSS 来包含光标。

标签： javascript

【解决方案1】：

让你的 javascript 函数返回 false：

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
        return false;
    }

并在锚元素处使用该值：

<a href="#" onclick="return toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

【讨论】：

谢谢。我最终使用了 href="javascript:;"相反，它具有相同的效果，但您的也可以。

【解决方案2】：

您可以将href="#" 替换为href="javascript:;" 或删除href 标记。

使用最后一种解决方案，当您将鼠标悬停在链接上时，您不会看到手形光标。

我会选择第一个解决方案，或者如果您确实想选择最后一个解决方案，您可以添加 a { cursor: pointer; } 以显示而不是手。

【讨论】：