通过js添加HTML元素时阻止IE跳转到页面顶部答案

【问题标题】：Stopping IE from jumping to top of page when HTML element is added via js通过js添加HTML元素时阻止IE跳转到页面顶部
【发布时间】：2017-07-09 10:53:07
【问题描述】：

我有一个带有 ASP:Grid 的页面，每行都有一个小复制按钮，用于复制单元格内的文本。为了复制文本，我编写了以下 javascript 函数：

var copyText = function (p_text) {
  $(".copy").append("<textarea id='test'></textarea>");
  $("#test").val(p_text);
  var cutTextarea = document.querySelector("#test");
  cutTextarea.select();
  document.execCommand("copy");
  $("#test").remove();
}

它在 Firefox 和 Chrome 中运行良好。复制也适用于 IE11，只是它总是跳到页面顶部，这真的很烦人。在 Firefox 和 Chrome 中，它停留在滚动位置。我看到了一些类似的问题，并尝试在添加我的 textarea 之前保存当前位置，并在函数末尾使用这些行滚动到那里：

var selectTop = $("body").offset().top;
$("body").scrollTop(selectTop);

$("body").offset().top 返回 0，因此它不起作用。我找到了一些其他可能的解决方案，但无法实施它们，以便它们适用于我的情况。希望有人能给我一个可行的解决方案:)

提前致谢！

【问题讨论】：

你取消点击吗？

标签： javascript jquery html internet-explorer

【解决方案1】：

我只是在寻找类似答案时偶然发现了这个问题（也有复制/粘贴功能），所以即使它已经有 3 年的历史了，这就是我最终设法解决的方法：

我很幸运（我猜？）有一个位置：在我的页面中可以访问固定 div。所以我正在创建的元素，我确保设置一个零大小，并将其附加到那个固定的 div，这意味着没有发生滚动。最终结果是这样的：

function copyStringToClipboard(str) {
    var el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style = { position: 'fixed', height: 0, width: 0, padding: 0, margin: 0 };
    //create in position: fixed element to avoid re-scrolling the page in IE11
    var container = document.getElementById("fixed-position-div"); 
    container.appendChild(el);
    el.select();
    document.execCommand('copy');
    container.removeChild(el);
}

希望对大家有所帮助！

【讨论】：