在动态显示内容后移至div

Question

我有一个表单和结果div在页面加载时隐藏。用户提交表单后，结果显示在表单下方。高度可能会有所不同，所以我想移到div的顶部，以便第一时间显示完整的内容。

这是我的jQuery：

var search = function (event) {
  event.preventDefault();
  $("#loading").css('display', 'block');
  var userValue = $("#username").val();
  $.ajax({
    type: "post",
    url: "random.php",
    dataType: "json",
    data: { username: userValue },
    success: function (response) {
      var scrollTo = $('#resultCard'), //the div I want to move to
        container = $('html,body');
      $("#loading").hide();
      scrollTo.show().animate({ opacity: 1, top: "-10px" }, 'slow');
      var title = response["title"];
      var desc = response["desc"];
      var poster = response["poster"];
      if(title === null) {
        $("#resultTitle").text("Invalid User");
        $("#resultDesc").hide();
        $("#resultButtons").hide();
        $(".ptw-image").css("cssText", "background-color: red !important;");
      } else {
        $("#resultTitle").text(title);
        $("#resultDesc").html(desc).show();
        $("#resultButtons").show();
        $(".ptw-image").css('background', "url(" + poster + ") center / cover");
        container.animate({
          scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
      }
    }
  });
};

这里是div：

<div style="display:none;margin-top:5px;" id="resultCard" class="ptw-card-wide mdl-card mdl-shadow--6dp">
    <div class="mdl-card__title mdl-color--primary mdl-color-text--white ptw-image">
        <h2 id="resultTitle" class="mdl-card__title-text ptw-text-shadow"> </h2>
    </div>
    <div id="resultDesc" class="mdl-card__supporting-text"> </div>
    <div id="resultButtons" class="mdl-card__actions mdl-card--border">
        <a id="resultInfo" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">More Info</a>
        <a id="rollAgain" style="float:right;" class="mdl-button mdl-js-button mdl-js-ripple-effect">Another one</a>
    </div>
</div>

感谢。

Answer 1

在这种情况下，#resultCard滚动到特定元素的一种简单方法是：

document.getElementById('resultCard').scrollIntoView();

如果您希望为滚动操作设置动画，可以使用jQuery轻松完成此操作：

$('html, body').animate({
    scrollTop: $("#resultCard").offset().top
});

Answer 2

如何解决

我们只是提交并阅读滚动位置索引。还在onload事件中通过Javascript设置滚动位置索引。

添加以下内容以获取/发布方法签名

@RequestParam(value = "windowScrollOffset", required = false) Integer windowScrollOffset,

在get / post方法

中添加以下内容

model.addAttribute("windowScrollOffset", windowScrollOffset);

将以下内容添加到表单

<input type="hidden" id="windowScrollOffset" name="windowScrollOffset" />

运行以下js onload

jQuery(document).ready( function() {
window.onscroll = function(){ document.getElementById('windowScrollOffset').value = (window.scrollY || window.pageYOffset);};
window.scroll(0, parseInt('${windowScrollOffset}'));   

} );

参考文章：

http://codexamples.blogspot.com/2016/07/keep-last-scroll-position-in-web.html