Javascript-点击时阻止JS链接滚动回顶部

Javascript - Stop JS link from scrolling back to the top when clicked?

本文关键字：链接 滚动 顶部 JS Javascript-      更新时间：2023-09-26

我使用这个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';
        }
    }

使您的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:;"替换href="#"，也可以删除href标记。

在最后一个解决方案中，当您将鼠标悬停在链接上时，将不会看到手动光标。

我会选择第一个解决方案，或者如果你真的想选择最后一个方案，你可以添加a { cursor: pointer; }来显示。

相关文章：