Question

我认为这很容易解决，但我似乎无法在任何地方找到解决方案。这是一个非常讨厌的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>

Ex：http://jsfiddle.net/hQP2q/

Answer 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/

Answer 2

有同样的问题..当我点击表格中的图标时，broswer改变了单元格的内容并滚动到页面顶部。我试图添加＆＃34;返回false;＆＃34;而问题已经消失。

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

Answer 3

你可以替换

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

与

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

OR 尝试：

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

另一种选择是像这样在href中添加一个id：参见sample

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

Answer 4

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

e.g。

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

Answer 5

相反，我会以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>

javascript：避免浏览器在内容插入时滚动回顶部

5 个答案: