Jquery Page Scrolling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Page Scrolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('.top-title').click(function(){
$('html, body').animate({
scrollTop: $(".middle").offset().top
}, 2000);
});
$('.middle-title').click(function(){
$('html, body').animate({
scrollTop: $(".bottom").offset().top
}, 2000);
});
$('.bottom-title').click(function(){
$('html, body').animate({
scrollTop: $(".top").offset().top
}, 2000);
});
});
</script>
<style>
.top, .middle, .bottom{
padding:30px;
}
.top{
height:600px;
background-color:#FFC;
margin-bottom:30px;
border:2px solid #FF9;
}
.middle{
height:600px;
background-color:#FF9;
border:2px solid #FF6;
margin-bottom:30px;
}
.bottom{
height:600px;
background-color:#FF6;
border:2px solid #FF3;
margin-bottom:30px;
}
.top-title, .middle-title, .bottom-title{
cursor:pointer;
margin-top:300px;
text-align:center;
text-decoration:underline;
font-size:32px;
font-weight:700;}
</style>
</head>
<body>
<h1>jQuery Page Scrolling</h1>
<div class="main">
<div class="top">
<div class="top-title">Click Here to go to the middle box</div>
</div>
<div class="middle">
<div class="middle-title">Click Here to go to the bottom box</div>
</div>
<div class="bottom">
<div class="bottom-title">Click Here to go to the top box</div>
</div>
</div>
</body>
</html>
