一頁式網站必備良藥 - Bootstrap的Scrollspy
可以呈現的內容如果不多,一頁式網站是最適合。雖然是一頁,還是要搭配導覽才有網站的Fu。用html的錨點(anchor)手法就可做到點擊連結跳到指定區域,這樣就有點單調,指引性也不足,感覺就差一點。 一頁式網站導覽,描配Bootstrap的Scrollspy功能,再配合導捲動時固定在頁面頂端,捲動時到了那區,該區對應導覽項目會搭配出現效果,再加上捲動效果,喔喔,這樣就可營造出不錯的效果。 錨點用法 <li><a href='#s1'>特色</a></li> ...... <div id="s1">....特色區內容....</div> Bootstrap的Scrollspy用法要點 監聽元素,要放入data-target="導覽列的id或class",一般都放在body上 body的css有沒有放position:relative其實沒有影響 導覽列,用<nav>或<div class="nav">,一定要有nav宣告 id或class要和監聽元素的data-target一致 導覽項目,建議class加上nav-link,比較不會出錯, 3.X版本沒放是OK 但4.X版本沒放就GG 導覽項目連結,採用HTML錨點用法 jQuery加上click時滑動效果 CSS要加上導覽列下.active的效果,很重要,不然active套上去了,沒有CSS效果還是GG 範例和說明 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> //滑動效果,沒有放,點擊後就跳來跳去沒有滑動的效果 <script> $(document).ready(function() {