jQuery應用 - 製作返回頂部效果

jQuery應用

BY 阿茂的隨手札記

WordPress從2.7版之後內建了jQuery,jQuery的優點就在於能夠兼容各種不同的瀏覽器,一些網頁效果也可以利用jQuery來達成。

很多網站底部都會設置個 To Top回到網站頂部,雖然說用處不大,不過對於一些文章落落長的網站來說是比較方便的(?),現在將jQuery應用在此處一樣可以達成效果,並且只需要兩個步驟。

步驟一︰【/wp-content/themes/使用中版型/header.php】

在<head>與</head>處加上

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

 

<script type="text/javascript" src="http://檔案放置網址/scrolltopcontrol.js"></script>

★第一行的jquery.min.js直接調用Google的,至於scrolltopcontrol.js檔案請從下方載點下載後放置到網路空間上調用。

載點請按此處下載

步驟二︰【/檔案放置位址/scrolltopcontrol.js】

尋找下列語法

<img src="up.png" style="width:48px; height:48px" />

想要改成文字的

替換為

<a href=”#top”>Back to Top</a>

★在原語法中的up.png,為圖像檔位址,可自行製作圖像上傳並改為圖像的位址,而改為文字的可以利用css(#top)來美化。

完成之後,只要捲軸拉離Top處就可以在網站右下方看到Back to Top的提示,不需要太繁瑣的修改即可實現。

你可能感兴趣的:(jquery)