It's easy to animate with jquery and jump to the top and bottom of of
- 2020-03-30 03:47:56
- OfStack
When the top button is clicked, execute the method, the scrollTop attribute obtains the distance between the selected label and the scroll bar, and when the bottom label is clicked, execute the method, with offset() obtaining the relative offset of the matching element in the current viewport
<!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>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery-1.8.0.js></script>
<script>
$(document).ready(function () {
//When the top button is clicked, the method is executed, and the scrollTop property gets the distance between the selected label and the scroll bar.
$('#top').click(function () {
$('html').animate(
{ scrollTop: '0px' }, 1000
);
});
//When the bottom label is clicked, execute the method, with offset() to obtain the relative offset of the matching element in the current viewport, and return an object with two attributes top and left
//Of course, we can also set 'slow','normal' or 'fast'
$('#foot').click(function () {
$('html').animate(
{scrollTop:$('span').offset().top},1000
);
});
});
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<a href="#" id="foot"> At the bottom of the </a>
<br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br />
<a href="#" id="top"> At the top of the </a>
<br /> <br /> <br /> <br /> <br />
<span></span>
</body>
</html>