防止焦点或防止滚动到焦点元素

Question

我有一个不错的 [label] 按钮，可以触发文件上传窗口。单独的图像上传表单/脚本本身位于页面底部。丑陋的默认文件上传按钮本身被 CSS 隐藏。

当我单击 [标签] 按钮时，浏览器会一直滚动到页面底部，我的隐藏表单和脚本内容所在的位置。如何防止这种聚焦或滚动？

这是我的代码的设置方式。一个不错的上传按钮和界面，用于在页面顶部附近（在“主”表单内）上传图像。页面底部实际图片上传表单（单独表单）：

<form name="main-form">
  <div class="imagelist" id="imagelist">
    <div class="uploadcontainer"><br><br>
      <label for="imagefile" id="uploadbutton" class="btn btn-primary btn-lg">Upload Images</label>
    </div>
  </div>
  ... (other input fields, etc for main form, etc.)
</form>

.
.
.
.
all the way to the bottom of the page:
.
.

<form name="uploadform" id="uploadform" method="post" action="/edit-images/uploadimage.php" enctype="multipart/form-data">
  <input type="hidden" name="itemimagesid" value="<?php echo $itemid; ?>" />
  <input type="hidden" name="itemtype" value="new" />
  <input type="file" name="imagefile" id="imagefile" onchange="uploadFile()">
</form>

Answer 1

嗯 - 你能滚动回标签吗？

$(document).ready(function() {
  $('#uploadbutton').click(function(event) {
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 0.1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="main-form">
  <div class="imagelist" id="imagelist">
    <div class="uploadcontainer"><br><br>
      <label for="imagefile" id="uploadbutton" class="btn btn-primary btn-lg">Upload Images</label>
    </div>
  </div>
  ... (other input fields, etc for main form, etc.)
</form>

<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

<form name="uploadform" id="uploadform" method="post" action="/edit-images/uploadimage.php" enctype="multipart/form-data">
  <input type="hidden" name="itemimagesid" value="<?php echo $itemid; ?>" />
  <input type="hidden" name="itemtype" value="new" />
  <input type="file" name="imagefile" id="imagefile" onchange="uploadFile()">
</form>