Question

我正在构建一个动态窗体/ div，该窗体在右下角具有一个克隆按钮。单击后，它将克隆.item:first，然后自动向下滚动，以便隐藏最后一个div。当您单击上一个或下一个按钮时，它应该滚动到我想要的确切div。当前，我的方法是将scrollTop与固定的px一起使用，但它无效。因为我们有很多屏幕尺寸。我该如何实现？谢谢

var template = $('#section .item:first').clone();

var sectionsCount = 1;

$('.new-div').click(function() {
  $('html, body').animate({
    scrollTop: '+=700'
  }, 800);
});

$('body').on('click', '.new-div', function() {
  sectionsCount++;

  var section = template.clone().find('.item').each(function() {}).end()

    .appendTo('#section');
  return false;

});

$(".next").click(function(event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: '+=700'
  }, 800);

});
$(".prev").click(function(event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: '-=700'
  }, 800);

});

body {
  background-color: lightgrey;
}

#section {
  height: 100vh;
  padding: 50px;
}

.item {
  width: 500px;
  background-color: white;
  height: 100%;
  margin: auto;
  text-align: center;
  padding: 20px;
  margin-bottom: 100px;
}

.new-div {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  color: inherit;
  font-family: helvetica;
  text-decoration: none;
  background: #eee;
}

.prev {
  position: fixed;
  right: 20px;
  bottom: 180px;
  padding: 20px;
  border-radius: 10px;
  color: inherit;
  font-family: helvetica;
  text-decoration: none;
  background: #eee;
}

.next {
  position: fixed;
  right: 20px;
  bottom: 100px;
  padding: 20px;
  border-radius: 10px;
  color: inherit;
  font-family: helvetica;
  text-decoration: none;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section">
  <div class="item">
    <h1 class="head">Div</h1>
  </div>
</div>
<a href="" class="new-div">New div</a>
<a href="" class="prev">prev</a>
<a href="" class="next">next</a>

Answer 1

您可以使用topPos = element.offsetTop;获取所需DIV的偏移量，然后滚动到其位置。有关此处的offsetTop，请访问此处。

 topPos = element.offsetTop;
 $('html, body').animate({
    scrollTop: topPos
 }, 800);

可以像这样利用代码。

Jquery：

 topPos = $($(".item")[0]).position().top;
 $('html, body').animate({
    scrollTop: topPos+"px"
 }, 800);

使用jQuery滚动到下一个或上一个DIV

1 个答案: