Home > Developer > JavaScript
Simpledemo:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6 7<style>8*{9margin:0;Tenpadding:0; One } A #father { - width:400px; - height:5000px; theBORDER:1PX Solid #000; - } - #son { - width:600px; + height:5000px; -background:linear-gradient (45deg, red,yellow,green,cyan,blue); + } A</style> at -<body> - <div id= "Top" > I am cute top </div> <div id= " father" > <div Id= "Son" ></div> </div> <a href= "#top" > Back to Top </a> to</body> + -<script> the *</script>Two. JS implementation back to top
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6 7<style>8*{9margin:0;Tenpadding:0; One } A #father { - width:400px; - height:5000px; theBORDER:1PX Solid #000; - } - #son { - width:600px; + height:5000px; -background:linear-gradient (45deg, red,yellow,green,cyan,blue); + } A at</style> -<script> -Window.onload =function () { - varTotop = document.getElementById (' totop ')); -Totop.onclick =function () { - //window to scroll to a coordinate in the document via the function Scrollto (x, y) setting inWindow.scrollto (0,0); - console.log (window); to } + } -</script> the *<body> $<div id= "Top" > I was cute top </div>Panax Notoginseng<div id= "Father" > -<div id= "Son" ></div> the</div> +<a href= "javascript:;" id= "Totop" > Back to Top </a> A<!--inline-- the<!--<a href= "Javascript:window.scrollTo (0,0); id=" Totop "> Return top </a>--> +</body> -Three. Inline return top1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6 7<style>8*{9margin:0;Tenpadding:0; One } A #father { - width:400px; - height:5000px; theBORDER:1PX Solid #000; - } - #son { - width:600px; + height:5000px; -background:linear-gradient (45deg, red,yellow,green,cyan,blue); + } A at</style> -<script> - /** - * Inline notation for adding events is not recommended in normal projects - * - * Because the return top function is simple and unique, it is convenient to write to the inline style. in * */ -</script> to +<body> -<div id= "Top" > I was charming top </div> the<div id= "Father" > *<div id= "Son" ></div> $</div>Panax Notoginseng<!--inline-- -<a href= "Javascript:window.scrollTo (0,0); id=" Totop "> Back to Top </a> the</body> +Four. Inline return top1<!doctype html>234<meta charset= "UTF-8" >5<title>Document</title>6<style>7 . box{8 height:2000px;9 width:100px;Ten Background:deeppink; One } A</style> - -<body> the<div class= "box" > I was hateful top </div> -<!--method One---- -<a onclick= "FN ()" href= "javascript:;" id= "btn" > Buttons </a> -<!--method Two-- +<!--<a href= "javascript:;" id= "btn" > Buttons </a>--> -</body> + A<!--External-- at<!--<script src= "Animate.js" ></script>--> -<script> - - /*The following is a built- in*/ - //Method One - functionfn () { in //window to be set by function Scrollto (x, y) means: Scroll to a coordinate in the document. -Window.scrollto (0,0); to } + //method Two, normal JS back to top - //var btn = document.getElementById ("btn"); the //Btn.onclick = fn; * $</script>Five. Return to the top of the outer-joint.Wailiantest.js
1 /* inline return Top test */ 2 function fn () {3 // window to be set by function Scrollto (x, y) means: Scroll to a coordinate in the document. 4 window.scrollto (0,0); 5 }
1<!doctype html>234<meta charset= "UTF-8" >5<title>Document</title>6<style>7 . box{8 height:2000px;9 width:100px;Ten Background:deeppink; One } A</style> - -<body> the<div class= "box" > I was hateful top </div> -<a onclick= "FN ()" href= "javascript:;" id= "btn" > Buttons </a> - -</body> + -<!--External-- +<script src= "Wailiantest.js" ></script>javascript--return to the top method: Anchor link, inline JS notation, outer chain, embedded type
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
