分享2U日誌: 網頁快速移至頂端與至文末的浮動多功能按鈕(強化版)

文章落落長
手指捲動是不是快抽筋了
這裡提供一個讓您快速至上下頁面的浮動按鈕
那...~~不做前戲了~~就直接來吧!!@@#
這裡以 Xuite 為對象 O.Oa
其他平台後半段會做說明!!^^

簡易版代碼:
 <script type="text/javascript"> lastScrollY = 0; function resetPos() { var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop; percent = .1 * (diffY - lastScrollY); percent = (percent > 0) ? Math.ceil(percent) : Math.floor(percent); document.getElementById("CustomTopBottom").style.top = parseInt(document.getElementById("CustomTopBottom").style.top) + percent + "px"; lastScrollY = lastScrollY + percent; } customArea = "<div id='CustomTopBottom' style='z-index:100;right:236px;top:305px; position:absolute;'>"; customArea += "<a title='至日誌最頂端' href='#'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/114.gif' border='0' vspace='5'/></a><br>"; customArea += "<a title='至日誌首頁' href='http://blog.xuite.net/frank.hgs/GE'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/123.gif' border='0' vspace='5'/></a><br>"; if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+", "i")) { customArea += "<a title='本頁連結'href="+location.href.split('#')[0].split('?')[0]+"><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/115.gif' border='0' vspace='3'/></a><br>"; customArea += "<a title='至文章底部' href='#owner_button'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/113.gif' border='0' vspace='5'/></a><br>"; } customArea += "</div>"; document.write(customArea); /* 設定畫面刷新間隔 */ window.setInterval("resetPos()", 1); </script>

調整
...CustomTopBottom' style='right:236px;top:305px;...

顯示位置右,上的數值
並修改"至日誌首頁"貼上你的首頁網址(若你不想改 Frank 不反對 ^^)
Xuite 日誌的用戶直接貼到自由欄位裡就 OK 囉!!

此程式是由 alan 的這篇:快速到網誌的頂端或底部

Frank 幾經波折苦練修改強化而來的...(因為 Frank 不是學這個的 ^^")

說明

本頁連結-
此鈕是判斷在瀏覽(Xuite)文章時才會出現!!
點擊此鈕會重新載入並自動將本文網址後的 "#..." 與 "?..." 刪除
在網址欄得到目前文章的真正連結
於分享文章或收藏連結時特別好用 ^^

若不想重新載入網頁
請於該按鈕上右鍵複製連結即可!!

至文章底部-
此鈕也是判斷在瀏覽(Xuite)文章時才會出現!!
讓你快速回應文章與分享
這裡 Frank 習慣使用"#owner_button"做錨點(Xuite)
方便編輯分享與回應
如果想直接到回應處可使用"#message_header"做錨點(Xuite)

更簡化-
若是您覺得還不夠簡單
或是只要某個功能的話
可在代碼框中刪除並測試其正確性
如圖:

更符合您要的簡潔功能!!

中場休息-
這個效果雖然可以使用圖示連結並用 CSS 的 fixed 來達成
但功能,相容性與視覺上並不如此程式來的靈活
另一方面他也支援所有瀏覽器

另外 Frank 為啥不用原始版本的字數做為顯示判斷
那是因為在某些情形下他會出現在不該出現的地方
比如點擊日誌首頁的"摘要模式"或"列表模式"時字數判斷符合就會出來嚇人...等!!
所以就多費些功夫讓他正確判斷囉!!

下文將補齊各部落格的參數,與完整常用的程式碼和使用的圖示!!

使用的圖示
Frank 知道您不一定喜歡上面代碼裡的圖示或大小
建議下載所提供或您自有的圖示
然後上傳至您的網頁空間
來做圖示替換
原因是若 Xuite 哪一天正好處於修護或不小心掛掉了!
才不會影響到您的圖示顯示!!

支援其他平台

按鈕顯示方式
方法一:
將代碼裡的
if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+", "i"))

換成
if (top.location.href.length >40)

以字數判斷首頁網址大於 40 即顯示該鈕,請自行斟酌首頁字數!!
雖然不一定很正確的判斷,但這是簡單方便的方法!!

方法二:
其他平台的換置
相同的將代碼裡的
if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+", "i"))

Wretch(無名小站)(付費會員，因為在無名小站，要付費才能用 JavaScript)
換成
if (top.location.href.match("^http://www.wretch.cc/blog/[0-z]+/[0-9]+", "i"))

文末錨點 :
(或回應,迴響處,也就是"至文章底部"的按鈕,以下皆用此代稱)
'#postComments' 或 '#comments'

Blogger
換成
if (top.location.href.match(".html"))

文末錨點 :
'#comments'

以下依此類推囉!!

其他 Frank 尚未或已測試的字串值
各位就試試先!! XD

Pixnet(痞客邦)
檢查網址裡頭有沒有 "/post/" 字串，
有的話就代表是單篇文章。
文末錨點 :
'#comments' 或 '#comment-area'

Yam(天空部落)
檢查網址裡頭有沒有 "/article/" 字串，
有的話就代表是單篇文章。
文末錨點 :
'#comments' 或 '#postComments'

Roodo(樂多)
檢查網址裡頭有沒有 "/archives/" 字串，
有的話就代表是單篇文章。
文末錨點 :
'#comments' 或 '#commentForm'

Sina(新浪部落)
檢查網址裡頭有沒有 "article.php" 字串，
有的話就代表是單篇文章。
文末錨點 :
'#mycomment'

以上部分參考 Nelson

所提供的 js 過濾網址

這裡提供

Frank 使用的參考代碼：
 <script type="text/javascript"> lastScrollY = 0; function resetPos() { var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop; percent = .1 * (diffY - lastScrollY); percent = (percent > 0) ? Math.ceil(percent) : Math.floor(percent); document.getElementById("CustomTopBottom").style.top = parseInt(document.getElementById("CustomTopBottom").style.top) + percent + "px"; lastScrollY = lastScrollY + percent; } customArea = "<div id='CustomTopBottom' style='z-index:100;right:236px;top:305px; position:absolute;'>"; customArea += "<a title='至日誌最頂端' href='#'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/114.gif' border='0' vspace='5'/></a><br>"; customArea += "<a title='至日誌首頁' href='http://blog.xuite.net/frank.hgs/GE'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/123.gif' border='0' vspace='5'/><br></a>"; customArea += "<a class='addthis_button' href='http://www.addthis.com/bookmark.php?v=250&username=frankhgs'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/207.gif' alt='Bookmark and Share' style='border:0' vspace='5'/></a><br>"; if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+", "i")) { customArea += "<a title='本頁連結'href="+location.href.split('#')[0].split('?')[0]+"><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/115.gif' border='0' vspace='3'/></a><br>"; customArea += "<a title='至文章底部' href='#owner_button'><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/113.gif' border='0' vspace='5'/></a><br>"; } if (top.location.href.match("^http://blog.xuite.net/[0-z.]+/[0-z.]+/[0-9]+#", "i")) { customArea += "<a title='移至進入的錨點'href="+location.href+"><img src='http://7.blog.xuite.net/7/0/0/b/11559578/blog_1350411/txt/25143665/263.gif' border='0' vspace='3'/></a>"; } customArea += "</div>"; document.write(customArea); /* 設定畫面刷新間隔 */ window.setInterval("resetPos()", 1); </script> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=frankhgs"></script>

可貼上其他 html 做編輯測試!!
只做參考用喔!!不是複製回去就能用嘿!!
稍作說明:Frank 的按鈕多了個"移至進入的錨點"判斷網址結尾有"#"時出現!!
做啥用!?
因為 Firefox 在 Xuite 點擊留言連結時並不會自動定位!!>"<
此鈕可尋找定位的錨點!!^^
說是 Bug 的補償按鈕也好!
說是收藏分享這則連結用也罷!
總之 Frank 需要他!! XD
還不知道是誰的 Bug 知道的朋友請跟我講嘿!!

另外也多一個 AddThis

超多元的分享鈕!!

以上 Frank 若有錯誤還請朋友們告知喔!!
也歡迎網友留言討論...不過這並不是 Frank 的本科,所以...

分享2U日誌

2011年11月19日星期六

網頁快速移至頂端與至文末的浮動多功能按鈕(強化版)

沒有留言:

張貼留言

主站連結

總網頁瀏覽量

搜尋此網誌

2011年11月19日 星期六