ScrollIt.js:建立頁面滾動導覽的 jQuery 插件

2019/01/19 1,382 0 網站技術 , HTML , JavaScript , jQuery

「ScrollIt.js」是一款可以建立頁面滾動導覽的 jQuery 插件,插件本身非常小,支援透過電腦鍵盤移動至上下自定義的節點,不用再透過 HTML 所提供的「#」頁面導覽,功能實在太簡陋,如果使用 jQuery 可以讓網址不會增加「#」,還能有動畫(平滑)的效果,真的超有質感!

這次萌芽網頁 2019 網站改版計畫就有把這個插件運用在萌芽網頁首頁,負責區塊導覽用,透過左側浮動區塊上方的按鈕,就可以快速捲動至指定區塊!

捲動動畫可以自行設定,捲動時間可以決定要花多久時間捲動到指定區塊(Ex: 1000 = 1秒),支援動態更新,網頁有內容變動都不會影響其原本的導覽功能,還支援如果在有浮動導覽下應該要多增加多少像素(px)的空間捲動頁面,這個就是非常重要的一項功能!

▲ 官方網站截圖。

安裝方式如下,需要用到 jQuery 唷!記得先把必要的檔案下載下來後放到自己的目的路徑。

<head> 內放入以下的原始碼(jQuery 可以是更新的版本):

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scrollIt.js" type="text/javascript"></script>

在每個自定義的區塊放上標籤,類似 HTML「#」需要有「name=""」的標籤那樣。

<div data-scroll-index="0">..content..</div>
<div data-scroll-index="1">...</div>
<div data-scroll-index="2">...</div>

導覽的按鈕則是用以下的原始碼:

<a data-scroll-nav="0">About</a>
<a data-scroll-nav="1">Usage</a>
<a data-scroll-nav="2">Options</a>

對於部分的連結,則是要使用 data-scroll-goto 屬性:

<a data-scroll-goto="0">Back to top</a>

呼叫方法,這邊建議放在 </body> 前:

$(function(){
  $.scrollIt();
});

更多使用方法與選項功能可以參考官方說明(Options)

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇