docs: fix navigation and scroll behavior on GitHub Pages

- Add "Advanced Features" link to header and mobile navigation
- Implement CSS native smooth scrolling and scroll-padding-top
- Remove conflicting smoothscroll.min.js script to fix "jump back" issue

Author: jtblin

.eslintignore

@@ -3,6 +3,5 @@ dist/
 tmp/
 examples/bundle.js
 examples/commonjs.bundle.js
-examples/smoothscroll.min.js
 coverage/
 test/fixtures/coverage.js

.github/workflows/main.yml

@@ -109,7 +109,6 @@ jobs:
               -e 's|\.\./angular-chart.js|dist/angular-chart.js|g' \
               -e 's|href="app.css"|href="examples/app.css"|g' \
               -e 's|src="app.js"|src="examples/app.js"|g' \
-              -e 's|src="smoothscroll.min.js"|src="examples/smoothscroll.min.js"|g' \
               examples/charts.html > deploy/index.html
 
       - name: Setup Pages

examples/app.css

@@ -1,3 +1,4 @@
+html { scroll-padding-top: 60px; scroll-behavior: smooth; }
 body { padding-top: 50px; }
 
 .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

examples/charts.html

@@ -71,12 +71,14 @@
           <li><a href="#getting_started">Getting started</a></li>
           <li><a href="#reactive">Reactive</a></li>
           <li><a href="#mixed">Mixed type charts</a></li>
+          <li><a href="#advanced">Advanced Features</a></li>
         </ul>
       </nav>
       <nav class="collapse" collapse="isCollapsed" style="height: 0px;">
         <ul class="nav navbar-nav">
           <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
           <li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
+          <li><a href="#advanced" ng-click="isCollapsed = !isCollapsed">Advanced Features</a></li>
         </ul>
       </nav>
     </div>
@@ -736,7 +738,6 @@ <h1>Advanced Features</h1>
   <script src="../node_modules/rainbow-code/src/language/html.js"></script>
   <script src="../node_modules/rainbow-code/src/language/javascript.js"></script>
   <script src="../dist/angular-chart.js"></script>
-  <script src="smoothscroll.min.js"></script>
   <script src="app.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){