DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：滑動效果的返回頂部錨點按鈕.

對於版面較長的網頁，在底部會放上返回頂部的錨點鏈接，做法也很簡單，直接用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 :

/**
 * 
方案二：‘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);
});
});