因為現在使用的 iArtWork 主題有一個雙擊網頁空白部分返回頂部的功能,所以已經習慣在看完文章之後雙擊一下部落格的空白部分,於是乎我就養成了在任何部落格都雙擊空白部分的習慣。
實際上實現“WordPres 主題雙擊空白部分返回頂部” 的方法很是簡單,
只需要把下面 JS 程式碼加到主題的頭部模版中:
<script type="text/javascript">
$(function(){
var scrollTo = function(top, duration, callback) {
var w = $(window);
var FPS = 50;
var currentTop = w.scrollTop();
var offset = (currentTop - top) / (duration * FPS / 1000);
var n = 0;
var prevTop = currentTop;
var t = setInterval(function() {
if ((prevTop - top) * (currentTop - top) <= 0) {
clearInterval(t);
currentTop = prevTop = top;
w.scrollTop(top);
if (callback) callback();
} else {
prevTop = currentTop;
w.scrollTop(currentTop -= offset);
}
}, 1000 / FPS);
}
$('body').dblclick(function(){
scrollTo(0, 200, function(){
});
$(".textField,#commentForm textarea").focus();
});
$('#container.#footer').dblclick(function(e){e.stopPropagation();});
});
</script>
OK,修改完的主題即可透過雙擊主題的空白部分 (邊緣四周什麼的) 實現返回頂部效果 (這個是我部落格的效果,屬於快速分會),具體效果可以在這裡部落格進行預覽!
下面更新一個緩慢返回頂部的方法:
<script type="text/javascript">// < ![CDATA[
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
window.scrollBy(0,1);
}
document.onmousedown=sc
document.ondblclick=initialize
// ]]></script>
使用方法和上面的一樣,直接放到 header.php 檔案的 </head> 之前就可以了。
OK,教程到這裡就寫完了,如果你有什麼不懂的地方,歡迎在下方留言,我會為你解答的。
PS:本文中說到的網站空白部分,指的是背景處,即為周良部落格的黑色背景處雙擊即可返回頂部!