08.스크롤스파이(Scrollspy)

스크롤스파이(Scrollspy)

스타일
```
 body {
 position: relative; 
 }
```

코드

<body data-spy="scroll" data-target=".navbar" data-offset="50">
  ...
  <nav class="navbar navbar-inverse navbar-fixed-top">
   ...
    <ul class="nav navbar-nav">
     <li><a href="#section1">menu1</a></li>
     <li><a href="#section2">menu2</a></li>
     <li><a href="#section3">menu3</a></li>
    ...
  </nav>
  ...
  <div id="section1">
    .....
  </div>
 <div id="section2">
    .....
  </div>
 <div id="section3">
    .....
  </div>
</body>

스크롤스파이(Scrollspy) – Smooth scrolling 기능 추가

<body>
  ...
  <nav class="navbar navbar-inverse navbar-fixed-top">
   ...
    <ul class="nav navbar-nav" id="myNavbar">
     <li><a href="#section1">menu1</a></li>
     <li><a href="#section2">menu2</a></li>
     <li><a href="#section3">menu3</a></li>
    ...
  </nav>
  ...
  <div id="section1">
    .....
  </div>
 <div id="section2">
    .....
  </div>
 <div id="section3">
    .....
  </div>

<script>
$(document).ready(function(){
 // Add scrollspy to <body>
 $('body').scrollspy({target: ".navbar", offset: 50}); 

 // Add smooth scrolling on all links inside the navbar
 $("#myNavbar a").on('click', function(event) {
 // Make sure this.hash has a value before overriding default behavior
 if (this.hash !== "") {
 // Prevent default anchor click behavior
 event.preventDefault();

 // Store hash
 var hash = this.hash;

 // Using jQuery's animate() method to add smooth page scroll
 // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 $('html, body').animate({
 scrollTop: $(hash).offset().top
 }, 800, function(){
 
 // Add hash (#) to URL when done scrolling (default click behavior)
 window.location.hash = hash;
 });
 } // End if
 });
});
</script>
</body>