حرکت یک باکس در صفحه

نوع اِوِنت مناسب برای این کار رو مشخص کنید. فکر میکنم dragstart باشه اما خودتون هم در لینک زیر می‌تونید رویدادهای جاوااسکریپت رو بررسی کنید:
https://www.w3schools.com/jsref/dom_obj_event.asp

بعد با استفاده از متد offsetTop در جاوااسکریپت مشخص میکنید که فاصله باکس یه اِلِمان تا بالای صفحه چقدره:

var distanceToTop = document.getElementById("boxID").offsetTop;

اگر این مقدار + ارتفاع باکس کمتر از 0 بشه یعنی باکس باید از از بالا حذف بشه و از پایین صفحه نمایش داده بشه. بیشترش محاسباته.

آقای بیات @ali.bayat
این طوری نوشتم و نشد باکس رو با کیبورد حرکت میدم

if(document.getElementById("box1").offsetTop < 0 +"px"){
                document.getElementById("box1").style.button = 0 + "px";

            }

خب شما موقع حرکت دادن باکستون مقدار top اون رو چک کنید و اگر

box.top-box.height > screen.height

شد یعنی باکس شما از صفحه خارج شده و دوباره box.top رو برابر با 0 قرار بدید.

آقا من دیگه مخم نمی کشه
:))
مشکل این کد چیه که اجرا نمیشه
@dr-code.ir
@ali.bayat

if(document.getElementById("box1").style.top == screen.height + "px"){
                alert("hello")

برای اینکه بهتر بشه کمک کرد کدهاتون رو روی سایتی مثل https://playcode.io اجرا کن و ذخیره کن و لینکش رو بزاری بهتر میشه مشکلش رو حل کرد.

دوستان این لینکشه اگه میشه کمک کنید
می خوام وقتی به آخر صفحه می رسه از اون طرف بیاد بیرون
http://playcode.io/ppp

@farshid
برای گرفتن فاصله از div تا بالای صفحه:

document.getElementById("box").offsetTop

و برای گرفتن ارتفاع div از:

document.getElementById("box").offsetHeight

این تابع رو توی کدهات بنویس و توی تابع move هربار اجراش کن.

      function position_checker(){
        box1 = document.getElementById("box1");
        box_top = (box1.offsetTop+box1.clientHeight)-10;
        if (box_top<-10) {
          box1.style.top = (screen.height-box1.clientHeight)+'px';
        }
      }

فقط توجه داشته باش که این تابع فقط داره بالا رفتن رو چک می کنه. یعنی رفت بالا و از صفحه خارج شد باز میاد پایین. بر اساس این بقیه رو هم بنویس.