BanterFace,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html{
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF0000), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #FF0000, #0060BF);
background-image: -moz-linear-gradient(left, #FF0000, #0060BF);
background-image: -webkit-linear-gradient(left, #FF0000, #0060BF);
background-image: linear-gradient(to right, #FF0000, #0060BF);
height: 5000px;
width: 5500px;
}
.hot{
background-color: #FFFF00;
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
margin-top: 1000px;
margin-left: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script>
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top,
scrollLeft: this.offset().left,
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function(){
$("a").on("click", function(event) {
event.preventDefault();
$(".hot").scrollTo(5000, "easeOutElastic")
})
})
</script>
</head>
<body>
<a>click</a>
<div class="hot"></div>
</body>
</html>
