如何在用户选择div并上下移动时垂直滚动滚动条

Question

我在一个页面中有多个div。 两个按钮＆＃34; UP＆＃34;和＆＃34; Down＆＃34;。用户可以选择一个div，并可以使用＆＃34; UP＆＃34;来移动所选的div。按钮或向下使用＆＃34;向下＆＃34;按钮。

当用户分别向上或向下移动选定的div时，我想向上和向下移动垂直滚动。

如何使用javascript或jquery实现这一目标？

Answer 1

你需要这样的东西

＆＃13;

＆＃13;

var myDiv = document.getElementById("myId");
var position = myDiv.getBoundingClientRect();
var y_pos = position.top;

var moveByDistance = 10;  //specify by how many pixel the div should move

function moveup() {
  y_pos = y_pos - moveByDistance;
  myDiv.style.marginTop = y_pos + "px";
}
function movedown() {
  y_pos = y_pos + moveByDistance;
  myDiv.style.marginTop = y_pos + "px";
}

＆＃13;

<div id="myId">Div content
  <button id="up" onclick="moveup()">Up</button>
  <button id="down" onclick="movedown()">Down</button>
</div>

＆＃13;

＆＃13;

＆＃13;