Page Scroll 的幾種方法
"Page Scroll" 指的是整個網頁長度的滾動, 方法有 html, javascript, jQuery.
1. 首先說到 html 的方式, 它是頁面滾動的老祖宗, 所有的後續程序開發都是以它為基礎.
說它是 "滾動", 還不如說是 "跳躍", 因為它只在錨點 (Anchor) 之間跳躍.
做法: 在頁首定位點的標簽上標明 id="top", 然後在頁腳放個 <a href="#top">goTop</a> 這就完成了.
當鼠標點擊 goTop, 頁面就會直接跳到 #top 的位置.
當然你也可以隨意多放幾個 id 和 # 鏈接, 做較多的跳躍.
2. 拜完了老祖宗, 現在進入正題, 其實 javacript 才是滾動的好手.
scrollTo() 可把内容滾動到指定的座標. 語法是 scrollTo(x,y);
左右移動用得少, 所以 x 可以直接等於 0, 我們主要是用到 y.
全部頁面的總高度: pageY=document.body.offsetHeight;
跳到頁腳是: self.scrollTo(0, pageY);
跳到頁首當然就是: self.scrollTo(0, 0);
跳到某個 id, 要先將 id 轉為座標: idY=document.getElementById('id').offsetTop; self.scrollTo(0, idY);
其中的 self = window = 當前窗口
如果有框架, 還可以用:
frame[i] = self.frame[i] = 當前窗口的框架
parent = self.parent = 當前窗口的父窗口
top = self.top = 當前窗口的頂層窗口
但別急, 現在只是和 html 的效果一模一樣, 是用跳的.
如果把 y 值設入變量, 就可以滾動了:
滾到頁腳是: for (i=0; i<=document.body.offsetHeight; i+=10) { self.scrollTo(0, i) }
滾到頁首是: for (i=document.body.offsetHeight; i>=0; i-=10) { self.scrollTo(0, i) }
滾到某個 id 就要多一個判斷, 要向上還是向下, 主要用當前座標和目標座標的差值, 這可以留給你當練習.
這樣的滾動已經相當順暢了, 但有個缺點: Chrome 是用跳的不是用滾的.
天啊! 如果 Chrome 能支援, 我們就可不用 jQuery 了.
3. jQuery 有自己的程式庫, 運行 Scroll 是輕而易舉.
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
});
上面這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍.
我知道有很多人教你用 $('body') 或是 $('html') 或是 $('html,body'), 但上面那一行補丁可以通殺.
滾到頁腳是: $body.animate({scrollTop: $('#bottom').offset().top}, 1000);
滾到頁首是: $body.animate({scrollTop: $('#top').offset().top}, 1000);
有沒發現都是直接抓 id, 所以滾到某個 id 就不用計算座標了, 這是 jQuery 一大優勢, 難怪 jQuery 會這麼流行.
專心看你會發現, 這動作和上一個 javascript 的效果一模一樣啊!
沒錯, 直線速度沒什麼不同, 如果只須要滾到 #top 或 #bottom 反而用 javascript 會簡單些.
如果還嫌效果不好, 網路上有很多 jQuery 插件是改善 Scroll 效果的, 你也可以下載來試試.
最後發現有個缺點不能不說, Chrome 對座標計算還有誤差...
4. 我發現有個變速的 javascript 值得推荐.
我的主題從 A8 - A9 都是用這個 js, 我主題右邊小三角就是了.
作者: Marco Rosella URI: http://lab.centralscrutinizer.it/the-tiny-scrollings/
它主要是使用減速效果, 越接近目標速度越慢, 就像車子慢慢減速再停止, 這看起來很舒服.
感覺效果比 jQuery 好, 未壓縮 js 才 3.04k, 比 jQuery 小太多了.
上面所有的 Scroll 示例在此, 可將 html copy 回去玩玩.
注意示例要用 jQ 1.2.x 才行, 因為我是用 input 直接叫取 jQ, 所以 1.3+ 不適用.
- 
- 
- 2010年 04月 30日
很好的效果。嘻嘻。
不错....貌似最后一个是把滚动后的页面当作另一个页面了 我按返回它就到顶端了 回去试一试
不是喔~ 還在同一頁面.
才发现这个这么好玩,回去试试!
把那個滾動的 html 抓到你電腦裏面, 隨時要用可參考.
学习了，膜拜一下大大
不能拜~ 常來坐坐就可以了~
博主的博客真强大 小生慕名前来学习 支持了~~~
歡迎常來, 希望能幫到你.
opera 畫面閃爍 这个问题我遇到过，呵呵 。原来如此
原來你也遇到了~ 又幫了一個人, 哈哈!
有些人搞的页面滚动，不仅速度慢，而且滚到目标后还要前后“震动一下”，等我看完这一系列动作，我眼也花了。。
是還有回彈效果的, 像 jQuery 有名的 ScrollTo 插件: http://demos.flesler.com/jquery/scrollTo/
你可試試它下面的 Options - "easing" 效果, 看真是會暈車.
jQuery "easing" 效果,我正在用啊，不过用久就不觉会有眼花的了
都是高手 我诚实的说句 确实看不懂
我也诚实的说句 你说对了我不懂的！
看久就懂, 多接觸就行了~
willin大师威武～
果然是普渡眾生。。现在各种浏览器都正常了，hoho
不客氣了~
mg12以前那个主题也有減速效果的，当然这个變速的 javascript也很好，不过我感觉有点卡啊！
另我自链了一下你的链。
喜歡減速效果的話, 還有一個 javascript 可參考: http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll
這是有名的 Smooth Scroll 效果很好. 按中間 "View Article" 可看到 demo.
这个不卡了，很好啊，不知左右減速行不行，
可以的话做个图片展示会不错的！
一直解决不了op下的top滚动，现在行了
呵呵~ 這方法早在新版 comments-ajax.js 用上了, 沒說可能沒發現. 昨天到 A.shun 那邊發現他也有這問題, 才把這方法拿出來普渡眾生.
一直想请教你，但你太忙了，就没发信了。我刚才写了篇文章，介绍这段jQ代码。
原来换主题啦，前几天一直打不开
整理得很齐全，很方便哎
再推荐一个jquery过渡效果的：http://bulog.org/share/wordpress/go-top.html
$('#wrap').fadeTo("100", 0.2, function(){$('html, body').animate({scrollTop: 0},800, function(){$('#wrap').fadeTo("100", 1);});});
這個例子很好, 是 fadeTo + scrollTop 的應用, 效果是 漸隱 --> 滾動 --> 漸顯. 但最好用上 Opera 補丁, 將 $('html, body') 改 $body, 讓 Opera 也能滾動.