博主也是在学js，老师出了这么一道题，博主用自己有限的知识，用tranform来实现了盒子的移动效果，这串代码兼容不同大小的浏览器，兼容性挺好的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
left:10px;
top:50px;
}
</style>
</head>
<body>
<button id="btn">移动</button>
<div id="ff"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var wid=0;
var hei=0;
var offset=$('#ff').offset();
var widd= 0;
var heii=0;
var ll=widd/heii;
$('#btn').mouseover(function () {//每当鼠标移动到按钮上就自动获取要移动的长度和宽度，兼容不同大小的浏览器
widd=$(document).width()-offset.left-document.getElementById('ff').clientWidth;//浏览器的总宽度要减去div这个元素离body元素的宽度，再减去他自身
heii=$(document).height()-offset.top-document.getElementById('ff').clientHeight;
ll=widd/heii;//算出宽相比于高要移动多少
})
$('#btn').click(function () {
setInterval(function () {//利用循环定时器来实现移动效果
hei++;
wid+=ll;
if (wid>widd&&hei>heii){//当数值超过要移动的长度和宽度时会停下来，精度+-1
return;
}
$("#ff").css("transform",`translate(${wid}px,${hei}px)`);},5);//时间定5毫秒刷新频率很高
})
</script>
</body>
</html>
如果问题欢迎留言。