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

閱讀須知:

This site is best viewed with IE 11.0 higher and 1024*768 resolution HighColor.

連結內容時效性依所在網頁分享為主!

**本站內容無断転載禁止!

*本站圖庫放置於Flickr,少部分國家/地區因封鎖可能無法正常讀取!

*本站雜談內容相關記事為當下日時所記錄,不沿用至往後!

*小站いきものがかり相關訊息一切歡迎交流!

本站歡迎中國、香港、日本以及台灣等等華人圈訪客,極少部份中國人以及黑名單不歡迎到訪!

2016年10月(9/3測試完畢,近期進行無縫轉移)起新域名即將啟用,網站名稱以及內容將大幅減少個人色彩朝公眾化趨近,相關資源整合轉移進行中,舊域名屆時自動同步轉換至新域名!

9/7告知︰
為了配合網站以及新域名的使用,2016/10/1起能正常連線網站者的國家/地區如下︰
中國、香港、日本、澳門、美國、台灣、馬來西亞、新加坡、韓國

您的IP記錄位置(自動):
54.156.69.204

**10/26新增說明(補),轉移之後的頁面呈現目前只限現在可登入的訪客,登入後(新站)與登入前(舊站)的頁面呈現樣貌完全不同,登入後留言不顯示於舊站,日後開放註冊所公開的首頁顯示將僅以概略方式呈現!**

**12/25,新站兩次測試後運作穩定,2017年1月進行第三次測試(已測試結束)!**

**2017年4月起,正式嵌入新站影音區影音資料,既有facebook影音區不再使用(舊站不定期使用放置)!

**目前新舊站相併運行,新站放牧期間暫時不開放註冊,僅接受Mail申請(留言留下資料即可)!

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 style="width: 48px; height: 48px;" alt="" src="up.png" />

想要改成文字的

替換為

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

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

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

閱讀須知:

This site is best viewed with IE 11.0 higher and 1024*768 resolution HighColor.

連結內容時效性依所在網頁分享為主!

**本站內容無断転載禁止!

*本站圖庫放置於Flickr,少部分國家/地區因封鎖可能無法正常讀取!

*本站雜談內容相關記事為當下日時所記錄,不沿用至往後!

*小站いきものがかり相關訊息一切歡迎交流!

阿茂

いきものがかり.ゆず.生物股長.柚子.1年2組.超いきものまつり2016 台湾參戦団-海老名初日 8/27.いきものがかり テレビ收藏愛好者 2006 ~ 2016/11/10.NEW收藏2016/11/10 ~ 現在.日文: 閱讀O.慣用語: 中文.台灣-高雄

Latest posts by 阿茂 (see all)

1則留言在 “jQuery應用 – 製作返回頂部效果

  1. 剛剛看你從大廳消失
    就知道你窩回來寫文嚕!~ 🙄

    阿茂回覆:
    原本想寫專題關於protege的心得,剛好在草稿還有這篇沒寫完XD

    Firefox Firefox Windows Windows

此篇已經關閉留言功能.