如何在用戶選擇div並上下移動時垂直滾動滾動條

Question

我在頁面中有多個div。 兩個按鈕「向上」和「向下」。用戶可以選擇一個div，並可以使用「向上」按鈕或向下使用「向下」按鈕移動選定的div。

我想要移動垂直滾動向上和向下移動分別向上或向下移動選定的div。

這是如何實現使用JavaScript或jQuery的？

Answer 1

你需要像這樣

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"; 
 
}

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