Write a JavaScript "Back to Top" Function

In a web page, if the page is relatively high, a return top button will be added to help you quickly return to the top.

You can view this page. If the page has a scroll height, there will be a small translucent black background with the words "Back to Top" in the lower right corner. After clicking the "Back to Top" button, the page is like a lubricant, and it slides to the top with a click. At the same time, you can also click the button to hide and hide.

Effect demonstration <Style>. fixed {position: fixed; bottom: 100px; width: 20px; right: 100px; height: 80px; font-size: 12px; cursor: pointer; background-color: # ccc; opacity: 0; filter: alpha (opacity = 0); z-index: 999 ;}. placeholder {height: 2000px ;} </style> </pead> <div id = "gotop" class = "fixed"> return to the top </div> <script> var tool = {// This method is used to avoid within a MS period, run func multiple times. Buffer: function (func, MS, context) {var buffer; return function () {if (buffer) return; buffer = setTimeout (function () {func. call (this) buffer = undefined;}, MS) ;}},/* read or set the transparency of the element */opacity: function (elem, val) {var setting = arguments. length> 1; if ("opacity" in elem. style) {// elem. style ["opacity"] cannot read the value return setting in CSS class? Elem. style ["opacity"] = val: elem. style ["opacity"];} else {if (elem. filters & elem. filters. alpha) {return setting? Elem. filters. alpha ["opacity"] = val * 100: elem. filters. alpha ["opacity"]/100 ;}}, // obtain or set the scrollTop of the Document Object // function ([val]) documentScrollTop: function (val) {var elem = document; return (val! = Undefined )? Elem.doc umentElement. scrollTop = elem. body. scrollTop = val: Math.max(elem.doc umentElement. scrollTop, elem. body. scrollTop) ;}}; // animation effect var effect ={// fade into fadein: function (elem) {var val = 0; var interval = 25; setTimeout (function () {val ++ = 0.1; if (val> 1) {tool. opacity (elem, 1) return;} else {tool. opacity (elem, val) setTimeout (arguments. callee, interval) ;}}, interval) ;}, // fade out fadeout: function (Elem) {var val = 1; var interval = 25; setTimeout (function () {val-= 0.1; if (val <0) {tool. opacity (elem, 0) return;} else {tool. opacity (elem, val); setTimeout (arguments. callee, interval) ;}}, interval) ;}, // move the scroll bar to move: function (scrollTop) {setTimeout (function () {scrollTop = Math. floor (scrollTop * 0.65); tool.doc umentScrollTop (scrollTop); if (scrollTop! = 0) {setTimeout (arguments. callee, 25) ;}}, 25) ;};// main program (function () {// gotop var visible = false; var elem = document. getElementById ("gotop"); function onscroll () {var scrollTop = tool.doc umentScrollTop (); if (scrollTop> 0) {if (! Visible) {effect. fadein (elem) visible = true ;}} else {if (visible) {effect. fadeout (elem); visible = false ;}} function onclick () {var scrollTop = tool.doc umentScrollTop (); effect. move (scrollTop);} elem. onclick = onclick; window. onscroll = tool. buffer (onscroll, 200, this) ;}) (); </script> <div class = "placeholder"> </div>

JavaScript code

<Script type = "text/javascript"> var tool = {// This method is used to prevent multiple func executions within a MS period. Buffer: function (func, MS, context) {var buffer; return function () {if (buffer) return; buffer = setTimeout (function () {func. call (this) buffer = undefined;}, MS) ;}},/* read or set the transparency of the element */opacity: function (elem, val) {var setting = arguments. length> 1; if ("opacity" in elem. style) {// elem. style ["opacity"] cannot read the value return setting in CSS class? Elem. style ["opacity"] = val: elem. style ["opacity"];} else {if (elem. filters & elem. filters. alpha) {return setting? Elem. filters. alpha ["opacity"] = val * 100: elem. filters. alpha ["opacity"]/100 ;}}, // obtain or set the scrollTop of the Document Object // function ([val]) documentScrollTop: function (val) {var elem = document; return (val! = Undefined )? Elem.doc umentElement. scrollTop = elem. body. scrollTop = val: Math.max(elem.doc umentElement. scrollTop, elem. body. scrollTop) ;}}; // animation effect var effect ={// fade into fadein: function (elem) {var val = 0; var interval = 25; setTimeout (function () {val ++ = 0.1; if (val> 1) {tool. opacity (elem, 1) return;} else {tool. opacity (elem, val) setTimeout (arguments. callee, interval) ;}}, interval) ;}, // fade out fadeout: function (Elem) {var val = 1; var interval = 25; setTimeout (function () {val-= 0.1; if (val <0) {tool. opacity (elem, 0) return;} else {tool. opacity (elem, val); setTimeout (arguments. callee, interval) ;}}, interval) ;}, // move the scroll bar to move: function (scrollTop) {setTimeout (function () {scrollTop = Math. floor (scrollTop * 0.65); tool.doc umentScrollTop (scrollTop); if (scrollTop! = 0) {setTimeout (arguments. callee, 25) ;}}, 25) ;};// main program (function () {// gotop var visible = false; var elem = document. getElementById ("gotop"); function onscroll () {var scrollTop = tool.doc umentScrollTop (); if (scrollTop> 0) {if (! Visible) {effect. fadein (elem) visible = true ;}} else {if (visible) {effect. fadeout (elem); visible = false ;}} function onclick () {var scrollTop = tool.doc umentScrollTop (); effect. move (scrollTop);} elem. onclick = onclick; window. onscroll = tool. buffer (onscroll, 200, this) ;}) (); </script>