jQueryまたはjavascriptを使用してdivの高さを上から下げる

Question

私がしようとしているのは、divという名前のイベントが呼び出されたときにトップまたはトップのコンテンツが特定のサイズに隠れて見えます。私はそれをする方法を考えることができません。

次のコードは、高さを下から上げ下げしますが、上から下げたいものです。

$(function() { 
 

 
    $("button:first").on("click", function() { 
 
    $("#target").css("height", "+=50px"); 
 
    }); 
 

 
    $("button:last").on("click", function() { 
 
    $("#target").css("height", "-=50px"); 
 
    }); 
 
});

#target { 
 
    background: purple; 
 
    color: white; 
 
    height: 300px; 
 
    width: 200px; 
 
} 
 

 
div { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button>PLUS</button> 
 
    <button>MINUS</button> 
 
</div> 
 
<div id="target"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
</div>

Answer 1

あなたは、要素の現在の高さを取得し、それにどんな計算を行うし、新しいCSS値を設定する必要があります。

P.S. これはブラウザがコンテンツをレンダリングする方法であるため、常に下から追加したり減らしたりします。左上から右下へ。したがって、高さを追加または減算すると、下から表示されます。

これは動作するはずです。

$("button:first").on("click", function() { 
    var targ = $("#target"), 
      targHt = targ.height(), 
      newTargHt = targHt + 50; 

    targ.height(newTargHt); 
}); 

$("button:last").on("click", function() { 
    var targ = $("#target"), 
      targHt = targ.height(), 
      newTargHt = targHt - 50; 

    targ.height(newTargHt); 
}); 

Answer 2

ちょっとこのビンの表情を持っている：https://jsbin.com/wiqapadeza/edit?html,js,output 私はあなたの問題を解決するためのマージンプロパティを使用しています

$(function() { 
var top=0; 
$("button:first").on("click", function() { 
    top=top+50; 
    $("#target").css("height", "+=50px"); 
    $("p").css("margin-top", top); 
    }); 
$("button:last").on("click", function() { 
    top=top-50; 
    $("#target").css("height", "-=50px"); 
    $("p").css("margin-top", top); 
}); 
}); 

私はそれがあなたの役に立てば幸い：