網頁教程:頁面返回頂部錨點按鈕的設計

來源:互聯網
上載者:User

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

‘TOP’置頂連結,說的通俗一點就是‘返回頂部的連結’,‘go to top ’一般都放在頁面的底部,它可以快速返回頁面頂部,以節省使用者瀏覽頁面的時間。 它主要的應用情境是當你有一個很長的網頁內容時,您通常要 把 ‘TOP’錨點連結 添加在頁面底部,只要使用者一點擊‘TOP’連結 ,就可以馬上回到 頁面的頂部了。

我們遇到的問題是:不是滾動到頁面底部的時候才看到了‘TOP’,如果頁面內容超過兩屏以上時,使用者有些心煩,我不想看了,我想回到頂部看一些其他的內容。
如果我們只看了第一屏的文章,不想看了,可是‘TOP’在第二屏才會出現。

這時候有三種情況發生:

  1. 發揮滑鼠特長就是拖動瀏覽器的捲軸或是滾動滑鼠滑輪,回到頁面頂部。
  2. 繼續硬著頭皮往下看,看有沒有‘TOP’,幸運的話,馬上找到了,可以回到頂部了。(一般人心中是沒有‘TOP’概念的,只有選擇1 和3 的方法了)
  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 外掛程式添加一些平滑的錨。

//pluginjQuery.fn.topLink = function(settings) {settings = jQuery.extend({min: 1,fadeSpeed: 200}, settings);return this.each(function() {//listen for scrollvar 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);
});
});



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。