1

我认为这很容易解决，但我似乎无法在任何地方找到解决方案。这是一个非常烦人的 javascript '功能？'。每次我向 div 添加内容时，文档都会滚动回顶部。我怎样才能避免这种恼人的行为？

n = 0;
function addContent() {
    div = document.getElementById('content');
    for(var i = 0; i < 100; i++) {
        n++;
        div.innerHTML = div.innerHTML + n + '<br />';
    }
}

</script>
</head>

<body>
<div id="content"></div>
<a href="#" onclick="addContent()">more content</a>

例如：http: //jsfiddle.net/hQP2q/

4

5 回答 5

1

这里的问题是，

当您单击锚链接时，会触发为该元素注册的 onclick 事件处理程序。

现在锚标记的默认行为是导航到它自己的 href 属性。

在您的情况下，两者都发生了，因此 url 被导航到“#”。"#" 充当书签，因此浏览器将查找任何具有 id 的 html 元素，与 url 中 # 后面的字符串相同。

所以解决这个问题的解决方案是，在你的 onclick 处理程序中，传递事件对象，当 onclick 处理程序被执行时，只需使用事件对象来防止元素点击行为的默认操作。

所以代码会像修改时一样。

<script>
     n = 0;
    function addContent(e) {
        div = document.getElementById('content');
        for(var i = 0; i < 100; i++) {
            n++;
            div.innerHTML = div.innerHTML + n + '<br />';
        }
        e.preventDefault();
        return false;
    }

    </script>
    </head>

    <body>
    <div id="content"></div>
<a href="#" onclick="addContent(event)">more content</a>

在这里看小提琴：http: //jsfiddle.net/uKrpH/2/embedded/result/

于 2013-02-15T06:36:05.533 回答
1

有同样的问题..当我点击表格中的图标时，浏览器更改了单元格的内容并滚动到页面顶部。我试图添加“return false;” 问题消失了。

<a href="#" onclick="addContent(); return false;">more content</a>
于 2016-03-14T09:32:40.390 回答
0

另一种解决方案应该是提供一个页面上不存在的#id。

例如

<a href="#dontscroll" onclick="addContent()">more content</a>
于 2013-02-15T06:28:23.210 回答
0

你可以更换

<a href="#" onclick="addContent()">more content</a>

和

<a href="javascript:void(0);" onclick="addContent()">more content</a>

或尝试：

<a href="#" onclick="addContent();return false;">more content</a>

另一种选择是像这样向 href 添加一个 id：参见示例

<a id="link" href="#link" onclick="addContent()">more content</a>
于 2013-02-15T06:25:29.087 回答
0

相反，我会用 jQuery 的方式来做：http: //jsfiddle.net/hQP2q/3/

<a href="#">more content</a> // <----i just removed the onclick from here

<script type="text/javascript">
        n = 0;

        function addContent() {
            div = document.getElementById('content');
            for (var i = 0; i < 100; i++) {
                n++;
                div.innerHTML = div.innerHTML + n + '<br />';
            }
        }
        $(function() { //<----------------------i would do it here.
            $('a').click(function(e) {
                addContent();
                e.preventDefault();
            });
        });
    </script>
于 2013-02-15T07:01:05.677 回答