The use of anchor points for the jump in the page is indeed very convenient, but to increase the effect of the Web page, you can use the animate in jquery, to achieve a scrolling action, slowly scrolling to where you want to jump to the position, which will look very tall.
Scroll to the top:
Copy Code code as follows:
$ ('. Scroll_top '). Click (function () {$ (' html,body '). Animate ({scrolltop: ' 0px '}, 800);});
Scroll to the specified location:
Copy Code code as follows:
$ ('. Scroll_a '). Click (function () {$ (' html,body '). Animate ({scrolltop:$ ('. a '). Offset (). Top}, 800);});
Full instance source code reference:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js smooth scrolling to the top, bottom, designated place </title>
<script type= "Text/javascript" src= "Http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js" ></script >
<style>
. box{height:200px; width:100% background: #ccc; margin:10px 0;}
location{position:fixed; right:0 bottom:10px; width:20px; background: #FFC; padding:5px; Cursor:pointer;color: #003} ;
</style>
<body>
<div class= "box" ></div>
<div class= "box" ></DIV>
<div class= " Box "></div>
<div class=" box "></DIV>
<div class=" box A "> Product Introduction Product Introduction Product Introduction Product Introduction Product Introduction Product Introduction Product Introduction Product Introduction product introduction </div>
<div class= "box" ></DIV>
< div class= "box" ></div>
<div class= "box" ></DIV>
<div class= "box" ></div>
<div class= "box Bottom" ></DIV>
<div class= "Location" >
<p class= "Scroll_top" > Back to Top </p>
<p class= "Scroll_a" > Product introduction </p>
<p class= "Scroll_bottom" > Sliding to the bottom </p>
</div>
<script type= "Text/javascript" >
JQuery (document). Ready (function ($) {
$ ('. Scroll_top '). Click (function () {$ (' html,body '). Animate ({scrolltop: ' 0px '}, 800);});
$ ('. Scroll_a '). Click (function () {$ (' html,body '). Animate ({scrolltop:$ ('. a '). Offset (). Top}, 800);});
$ ('. Scroll_bottom '). Click (function () {$ (' html,body '). Animate ({scrolltop:$ ('. Bottom '). Offset (). Top}, 800);});
});
</script>
</body>