我正在使用js创建一个；“复制到剪贴板”；按钮，使用以下代码here:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand(\'selectAll\',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

然后，我使用以下命令加载脚本：

add_action( \'wp_enqueue_scripts\', \'load_copy\' );
function load_copy() {
    wp_enqueue_script(\'copyjs\', get_template_directory_uri() . \'/js/copy.js\', array(\'jquery\') );
}

然后，我有一个按钮设置来触发这个js onclick，从div元素中复制文本。该函数工作得很好，除了：因为js加载在WP的页脚中，所以focus() 命令使页面在触发onclick事件时滚动到底部。

我试过使用focus({preventScroll: true}) 但之后这个函数就不起作用了，我对js的理解还不够透彻，无法找出原因。

有没有人有办法阻止页面滚动？

编辑：添加我现在使用的解决方案，来自下面Veerji的答案，只做了一个更改。

function copyToClipboard(selector){
        var $temp = jQuery("<div>");
        jQuery("body").append($temp);
        $temp.attr("contenteditable", true)
            .html(jQuery(selector).html()).css(\'position\', \'fixed\').select()
            .on("focus", function() { document.execCommand(\'selectAll\',false,null); })
            .focus().css(\'position\', \'static\');
        document.execCommand("copy");
        $temp.remove();
}

function copyToClipboard(selector, event){
    event.preventDefault();
    var $temp = jQuery("<div>");
    jQuery("body").append($temp);
    $temp.attr("contenteditable", true)
      .html(jQuery(selector).html()).css(\'position\', \'fixed\').select()
      .on("focus", function() { document.execCommand(\'selectAll\',false,null); })
      .focus().css(\'position\', \'static\');
    document.execCommand("copy");
    $temp.remove();
}