jQuery 跟隨瀏覽器窗口的回到頂部按鈕

時間 2019-11-09

原文原文鏈接

上週花了點時間改了一下 Go Top 按鈕的顯示效果, 顯示在頁面右側, 跟隨瀏覽器窗口滾動, 在 IE6 瀏覽器中使用淡入淡出的跟隨顯示. 可能如今已經存在不少相似的插件和工具, 但我仍是想分享一下, 並將腳本封裝成類, 以方便其餘人閱讀和使用.javascript

由於實現原理比較簡單, 本文就不扯技術方面的話題了, 只會講講使用方法, 要研究的同窗請本身默默地看代碼去吧.php

功能描述

在頁面中注入回到頂部 (Go Top) 按鈕, 併爲該按鈕綁定跟隨瀏覽器窗口和回到頁面頂部的事件. 須要 jQuery 支持, 若是同時引入 jQuery 的 ScrollTo 插件將有滾動回到頁面頂部的效果, 不然只是直接定位至頂部.css

在 IE6 中, 由於不支持瀏覽器跟隨功能, 因此經過跟隨頁面滾動來虛擬跟隨效果, 在滾動頁面的時候隱藏回到頂部按鈕, 滾動中止時再顯示按鈕.java

參數描述

pageWidth: 頁面寬度 (正整數), 如圖中 A 所示.node
nodeId: 回到頂部按鈕的 ID (字符串).jquery
nodeWidth: 回到頂部按鈕的寬度 (正整數), 如圖中 B 所示.瀏覽器
distanceToBottom: 回到頂部按鈕到頁面底部的距離 (正整數), 如圖中 C 所示.ide
distanceToPage: 回到頂部按鈕到頁面右邊的距離 (正整數), 默認 20.工具
hideRegionHeight: 不顯示回到頂部按鈕的頂部區域高度 (正整數), 如圖中 D 所示.網站
text: 回到頂部按鈕內顯示的文本 (字符串).

使用步驟

1. 下載所需文件

jQuery 和 Go Top 功能腳本 (備用下載地址), 放置到能夠外鏈的網盤或者網站上.

2. 插入 JavaScript 和添加執行腳本

在頁面底部 </body> 以前加入代碼例子以下:

<script src="jquery.js"></script>
 <!-- 若是已在網站的其餘地方引入 jQuery, 請不要在次引入 -->
 <script src="go-top.js"></script>
 <script>
 /* <![CDATA[ */(new GoTop()).init({
 	pageWidth		:980,
 	nodeId			:'go-top',	
 	nodeWidth		:50,	
 	distanceToBottom	:125,	
 	distanceToPage	        :20,   //以前被做者忘了
 	hideRegionHeight	:130,	
 	text			:'Top'});
 	/* ]]> */
 </script>

3. 修改網站樣式文件

加入回到頂部按鈕對應的樣式, 假設回到頂部按鈕 ID 設置爲 go-top, 那麼能夠添加代碼以下:

a#go-top{
background:#E6E6E6;
width:50px;height:25px;
text-align:center;
text-decoration:none;
line-height:25px;
color:#999;}
a#go-top:hover{
background:#CCC;color:#333;}

這裏的樣式請自由發揮, 但 width 請與腳本參數中的 nodeWidth 保持一致.

後話

月初我換了臺電腦, 分辨率提升了不少, 博客兩邊多出來不少空間, 而當時爲了省事作的 Go Top 按鈕一直貼近瀏覽器窗體的右邊界, 至關難看. 因此上週花了點時間來重寫了一下相關代碼, 當初公司用的相關組件也是我寫的, 再整個 jQuery 的也不費時. 然而我很是喜歡 Alibaba.com 搜索頁面 Go Top 按鈕的設計, 圖片盜了過來.

這個腳本支持全部網站使用, 爲此, 我沒有將它作成 WordPress 插件. 若是使用遇到問題, 請在此留言. 幾年前我寫過一個 JavaScript 實現變速滾動回到頁面頂部的文章, 有興趣的朋友也能夠看看.

使用圖片修改文中提到的CSS便可.

a#go-top{background:url(圖片連接) no-repeat;}

a#go-top:hover{background:url(鼠標懸浮圖片連接) no-repeat;}