一頁式網站必備良藥 - Bootstrap的Scrollspy
可以呈現的內容如果不多，一頁式網站是最適合。雖然是一頁，還是要搭配導覽才有網站的Fu。用html的錨點(anchor)手法就可做到點擊連結跳到指定區域，這樣就有點單調，指引性也不足，感覺就差一點。
一頁式網站導覽，描配Bootstrap的Scrollspy功能，再配合導捲動時固定在頁面頂端，捲動時到了那區，該區對應導覽項目會搭配出現效果，再加上捲動效果，喔喔，這樣就可營造出不錯的效果。
一頁式網站導覽，描配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() {
- $(".navbar-nav a").on('click', function(event) {
- if (this.hash !== "") {
- event.preventDefault();
- var hash = this.hash;
- $('html, body').animate({
- scrollTop: $(hash).offset().top
- }, 800, function(){
- window.location.hash = hash;
- });
- } // End if
- });
- });
- </script>
- //導覽active的css，一定要設定，否則也是沒有效果
- <style>
- .navbar .active {效果}
- </style>
- //監聽 data-target要放導覽的id或class
- <body data-spy="scroll" data-target=".navbar" data-offset="50">
- //導覽，若不是用nav元素時，class內必須放入nav，捲動時固定在頁面頂端才有意義
- //若是用bootstrap 4以上版本，導覽項目a的class一定要放nav-link否則捲動時並不會對塶套用和移除active，效果就無法呈現出來
- <nav class="navbar fixed-top">
- <ul>
- <li><a class="nav-link" href="#s1">Section 1</a></li>
- ....
- </ul>
- </nav>
- //內容區，一定要用id而且不能重覆
- <div id="s1">內容</div>
花博豐原展區，原住神-土地公
