Copy codeThe Code is as follows:
<! 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 you click the top button, run the scrollTop attribute to obtain the distance between the selected tag and the scroll bar.
$ ('# Top'). click (function (){
$ ('Html '). animate (
{ScrollTop: '0px '}, 1000
);
});
// When you click the bottom label, execute the method, where offset () gets the relative offset of the matching element in the current view, and returns an object with two attributes: top, left
// The second attribute of animate. Of course, we can also set 'low', 'normal', or 'save'
$ ('# Foot'). click (function (){
$ ('Html '). animate (
{ScrollTop: $ ('span '). offset (). top}, 1000
);
});
});
</Script>
</Head>
<Body>
<Br/>
<A href = "#" id = "foot"> bottom </a>
<Br/>
<Br/>
<A href = "#" id = "top"> top </a>
<Br/>
<Span> </span>
</Body>
</Html>