javascript滑動回到頂部

    對於版面較長的網頁，在底部會放上返回頂部的錨點連接，作法也很簡單，直接用HTML就能實現，不過這種效果不交呆板，緣由就是向上移動很忽然，常常會讓用戶產生莫名的感受，本文結合JS將實現一種滑動返回頂部的網頁效果，這樣用戶感受會比較舒服。

     ‘TOP’置頂連接，說的通俗一點就是‘返回頂部的連接’，‘go to top ’通常都放在頁面的底部，它能夠快速返回頁面頂部，以節省用戶瀏覽頁面的時間。 它主要的應用場景是當你有一個很長的網頁內容時，您一般要 把 ‘TOP’錨點連接 添加在頁面底部，只要用戶一點擊‘TOP’連接 ,就能夠立刻回到 頁面的頂部了。

     咱們遇到的問題是：不是滾動到頁面底部的時候纔看到了‘TOP’,若是頁面內容超過兩屏以上時，用戶有些心煩，我不想看了，我想回到頂部看一些其餘的內容。

      若是咱們只看了第一屏的文章，不想看了，但是‘TOP’在第二屏纔會出現。

這時候有三種狀況發生：

發揮鼠標特長就是拖動瀏覽器的滾動條或是滾動鼠標滑輪，回到頁面頂部。

繼續硬着頭皮往下看，看有沒有‘TOP’,幸運的話，立刻找到了，能夠回到頂部了。（通常人心中是沒有‘TOP’概念的，只有選擇1 和3 的方法了）

直接關閉網頁，或者從新打開網站，或者離開網站。

我想咱們已經找到了問題的所在了。

咱們有三種方案能夠給用戶帶來良好的用戶體驗：

方案一：在合適的地方，手動加入一個或多個‘TOP’連接。

這是最原始的作法了，若是滾動太快，驗，那就是咱們給用戶用腳本實現一下緩衝效果，而不是直接飆到頂部。

The HTML :
<a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>
The JavaScript :
/**
* 做者：我是UED ，http://www.iamued.com/qianduan/816.html
* 回到頁面頂部
* @param acceleration 加速度
* @param time 時間間隔 (毫秒)
**/
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;

// 滾動條到頁面頂部的水平距離
var x = Math.max(x1, Math.max(x2, x3));
// 滾動條到頁面頂部的垂直距離
var y = Math.max(y1, Math.max(y2, y3));

// 滾動距離 = 目前距離 / 速度, 由於距離原來越小, 速度是大於 1 的數, 因此滾動距離會愈來愈小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

// 若是距離不爲零, 繼續調用迭代本函數
if(x > 0 || y > 0) {
   var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
   window.setTimeout(invokeFunction, time);
}
}

方案二：‘TOP’默認是隱藏的，只要滾動條，滾動到必定高度時就顯示，不然就隱藏。
這樣我可能想從中間某處回到頁面的頂部成爲可能。

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 :
注意：
咱們須要MooTools Core 庫的同時，也須要MooTools More 庫中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 兩大文件。
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 + 10,
    'width': 100
   });
   }
   go.fade((window.getScroll().y > 300) ? 'in' : 'out')
});
});
//還有一個例子是動態生成‘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 not having it at all than 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 of 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: 'none',
        position: 'fixed',
        bottom: 0,
        right: 0,
        cursor: 'pointer'
      },
      'text': 'back to top',
      'tween': {
        duration: 200,
        onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
      },
      'events': {'click': function() {
    /*location是javascript裏邊管理地址欄的內置對象，好比location.href就管理頁面的url，用 location.href=url就能夠直接將頁面重定向url。而location.hash則能夠用來獲取或設置頁面的標籤值。好比 http://ued.alimama.com#admin的location.hash=」#admin」,利用這個屬性值能夠實現不少效果。*/
        if (window.location.hash) { window.location.hash = '#top'; } 
        else { window.scrollTo(0, 0);/*把窗口內容滾動到指定的座標。*/ }
      }}
    }).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').setStyle('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 :
//須要jQuery’s ScrollTo plugin 插件添加一些平滑的錨。
//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
   min: 1,
   fadeSpeed: 200
}, settings);
return this.each(function() {
   //listen for 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);
});
});
注意：
Please note that this version doesn’t work with Internet Explorer due to IE’s lack of CSS 「position:fixed」 support. Here is a shotty attempt at IE support:
//plugin
    jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1, fadeSpeed: 200,
ieOffset: 50
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.css('display','none'); //in case the user forgot
$(window).scroll(function() {
//stupid IE hack
if(!jQuery.support.hrefNormalized) {
el.css({
'position': 'absolute',
'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};


$(document).ready(function() {
$('#gototop').topLink({
min: 400,
fadeSpeed: 500
    });
//smoothscroll
$('#gototop').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});