The specific implementation method of returning the page to the top

When there are too many WEB pages, you need to drag the scroll bar repeatedly to browse the page content, and the user experience will naturally be discounted. To improve the user's comfort when browsing the page as much as possible, the first solution is:

When a scroll bar appears on the page, slide it a little. The "Back to Top" button appears in the lower right corner of the page. Click this button to return to the top of the page. The specific implementation method is as follows:

1. Introduce scrolltop. js on the current page. content:

/* The long page returns the top */function goTopEx () {var obj = document. getElementById ("goTopBtn");/* obtain the distance from the top */function getScrollTop () {return document.doc umentElement. scrollTop;}/* set the distance from the top */function setScrollTop (value) using document.doc umentElement. scrollTop = value;}/* return the top image style */window. onscroll = function () {getScrollTop ()> 0? Obj. style. display = "": obj. style. display = "none";}/* Click Event */obj. onclick = function () {var goTop = setInterval (scrollMove, 10); function scrollMove () {setScrollTop (getScrollTop ()/1.5); if (getScrollTop () <1) clearInterval (goTop );}}}

2. Add the DIV to the current page:

<Div style = "display: none; "id =" goTopBtn ">  </div>

3. Call goTopEx () in scrolltop. js when loading the current page. Method:

<script type="text/javascript">$(document).ready(function(){goTopEx();});</script>

You can use the code above to return to the top of the page.