Web Tutorials: Page Return top anchor button design

For pages with longer layouts, a link to the top of the anchor point will be placed at the bottom, practice is also very simple, directly with the HTML can be achieved, but this effect is not rigid, the reason is to move up very suddenly, often make users feel inexplicable, this article combined with JS will achieve a sliding back to the top of the Web page effect, This will make the user feel more comfortable.

' Top ' sticky link, said the popular point is ' return the link ', the ' go ' is generally placed at the bottom of the page, it can quickly return to the top of the page, to save users browsing the page time. The main scenario is that when you have a long Web page content, you usually add the ' top ' anchor link to the bottom of the page, and as soon as the user hits the ' tops ' link, you can get back to the front of the page.

We encountered the problem is: not scrolling to the bottom of the page to see the ' top ', if the page content more than two screen, the user is a bit upset, I do not want to see, I want to go back to the top to see some other content.
If we only see the first screen of the article, do not want to see, but ' top ' in the second screen will appear.

There are three kinds of situations that occur:

1. To play the mouse is to drag the browser's scroll bar or roll the mouse pulley, back to the top of the page.
2. Continue to bite the bullet down and see if there is a ' top ', if you're lucky, you'll find it right away. (In general, there is no "top" concept, only the choice of 1 and 3 methods)
3. Close the page directly, or reopen the site, or leave the site.

I think we've found the problem.

We have three options to bring a good user experience to the user:

option One: In the right place, manually add one or more ' top ' links.

This is the original approach, if scrolling too fast, the test, that is, we give users a script to achieve the buffer effect, rather than directly to the top.

The HTML:

<a id= "gototop" href= "javascript:void (0);" onclick= "Gotop (); return false;" > Top of Page</a>

The JavaScript:

/** * Author: I'm ued, http://www.iamued.com/qianduan/816.html * Back to the top of the page * @param acceleration acceleration * @param time interval (milliseconds) * * /function Gotop (acceleration, time) {acceleration = acceleration 0.1; Time = time 16;   var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0;   if (document.documentelement) {x1 = document.documentElement.scrollLeft 0; Y1 = Document.documentElement.scrollTop 0; } if (document.body) {x2 = document.body.scrollLeft 0; y2 = document.body.scrollTop 0; } var x3 = window.scrollx 0; var y3 = window.scrolly 0;  //scroll bar to the top of the page at the horizontal distance var x = Math.max (x1, Math.max (x2, x3)); The vertical distance of the scroll bar to the top of the page var y = Math.max (y1, Math.max (y2, y3));  //rolling distance = current distance/speed, because the distance is smaller, the speed is greater than 1 of the number, so the rolling distance will be more and more small var speed = 1 + acceleration; Window.scrollto (Math.floor (x/speed), Math.floor (Y/speed));  //If the distance is not zero, continue calling the iteration this function if (x > 0 y > 0) {var invokefunction = "Gotop (" + Acceleration + "," + Time + ")" ; WiNdow.settimeout (invokefunction, time); } }

scheme two: ' Top ' By default is hidden, as long as the scroll bar, scroll to a certain height when it is displayed, otherwise it is hidden.

That way I might want to get back to the top of the page from somewhere in the middle.

The HTML:

<a href= "#top" id= "Gototop" >top of page</a>

The CSS:

#gototop {display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid Green; Background:lightgreen; padding:10px; } #gototop {text-decoration:underline;}

The MooTools JavaScript:

Attention:

We need to MooTools Core library at the same time, also need mootools more library Fx.Scroll.js and Fx.SmoothScroll.js two large files.

Window.addevent (' Domready ', function () { new Smoothscroll ({duration:700}); /* Go to top * /var go = $ (' gototop '); Go.set (' opacity ', ' 0 '). SetStyle (' Display ', ' block '); Window.addevent (' scroll ', function (e) { if (Browser.Engine.trident4) { go.setstyles ({ ' position ': ' Absolute ', ' bottom ': window.getposition (). Y + ten, ' width ': (M }); } Go.fade (Window.getscroll (). y > 300)? ' In ': ' Out ') };

Another example is the dynamic generation of ' top '.

The MooTools JavaScript:

/** * back-to-top:unobtrusive Global ' back to top ' link using mootools 1.2.x * This work is licensed under a Creative Commons attribution-share alike 3.0 License. * http://creativecommons.org/licenses/by-sa/3.0/*/ //hide the effect from IE6, better does not have it at all tha n being choppy. if (! BROWSER.ENGINE.TRIDENT4) {//element added onload for IE to avoid the ' Operation aborted ' bug. Not yet verified for IE8 As it ' s still on beta as the this modification. Window.addevent (Browser.Engine.trident? ' Load ': ' Domready '), function () {var target_opacity = 0.64; New Element (' span ', {' id ': ' back-to-top ', ' styles ': {opacity:target_opacity, display: ' Non E ', Position: ' Fixed ', bottom:0, right:0, cursor: ' pointer '}, ' text ': ' Back To top ', ' tween ': {duration:200, Oncomplete:function (EL) {if (El.get (' opacity ') = = 0) el.setsty Le (' Display ', ' None ')}}, ' EVents ': {' click ': function () {/*location is a built-in object that manages the address bar in JavaScript, such as Location.href URL to manage the page, with location.href= URL to redirect the page directly to the URL. Location.hash can be used to get or set the label value of a page. For example, Http://ued.alimama.com#admin's location.hash= "#admin", using this attribute value can achieve many effects. */if (window.location.hash) {window.location.hash = ' #top ';} else {window.scrollto (0, 0);/* Scrolls the contents of the window to the specified coordinates. */}}}). inject (document.body);   window.addevent (' scroll ', function () {var visible = Window.getscroll (). Y > (Window.getsize (). Y * 0.8) ; if (Visible = = arguments.callee.prototype.last_state) return;  //Fade if supported if (Fx && fx.tween) {if (visible) $ (' Back-to-top '). Fade (' hide '). s Etstyle (' Display ', ' inline '). Fade (target_opacity); else $ (' back-to-top '). Fade (' out '); else {$ (' back-to-top '). SetStyle (' Display '), (visible?) ' Inline ': ' none '); }   arguments.callee.prototype.last_state = visible}); }); }

The JQuery JavaScript:

Need to add some smooth anchors to the jQuery ' s Scrollto plugin plugin.

Plugin jQuery.fn.topLink = function (settings) { settings = jquery.extend ({ min:1, fadespeed:200 }, settings); Return This.each (function () { //listen to scroll var el = $ (this); El.hide (); In case the user forgot $ (window). Scroll (function () { if ($ (window). scrolltop () >= settings.min) { El.fadein (settings.fadespeed); } else { el.fadeout (settings.fadespeed); } });}; Usage W/smoothscroll $ (document). Ready (function () { //set the link $ (' #gototop '). TopLink ({ min:400, fadespeed:500 }); Smoothscroll $ (' #gototop '). Click (function (e) { e.preventdefault (); $.scrollto (0,300); });

Attention:

Please, this is the version doesn ' t work with Internet Explorer due to IE ' lack of CSS ' position:fixed ' support. Here's a shotty attempt at IE support: