title: jquery scrollintoview with bootstrap scrollspy
body: <p>Hello fellow stackoverflow  members who use bootstrap! I appreciate your time and input. I am having trouble implementing a jQuery.scrollintoview with bootstrap scrollspy.</p>
  
  <p><a href="http://jsfiddle.net/aKK2k/1/" rel="nofollow">http://jsfiddle.net/aKK2k/1/</a></p>
  
  <p>Above is fiddle, scrollspy is broken but the scrollintoview should still work, or am i mistaken?</p>
  
  <p>Nav buttons that move the page:</p>
  
  <pre><code> &lt;li&gt;
              &lt;a href="#section-2" id="a-section-2"&gt;
                Products
              &lt;/a&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p>Below is the scroll-to-section</p>
  
  <pre><code> &lt;h3 class="center" id="section-2"&gt;
         So, how can Day &amp; Night help your business today?
   &lt;/h3&gt;
  </code></pre>
  
  <p>Below is the JS that handles the page scrolling / hiding url / etc.</p>
  
  <p>The implementation happens at </p>
  
  <pre><code>$($(this).attr('href'))[0].scrollIntoView(250, "easeOutExpo");
  </code></pre>
  
  <p>The whole JS</p>
  
  <pre><code>  &lt;script&gt;
   $("document").ready(function() {
        $(document).on('click','.navbar li a',function(event) {
          event.preventDefault();
         if($.trim($(this).html())!='FAQ'){
  //if($.trim($(this).html())!='FAQ' || $.trim($(this).html())!='FAQ2'){
             var offset = $('#myNavbar').height()+30;
             if ($(window).width() &lt;= 768) {
                    var offset = 100;
               }
  $($(this).attr('href'))[0].scrollIntoView(250, "easeOutExpo");
             scrollBy(0, -offset);
            }
            else
            {
                window.location.href = $(this).attr('href');
            }
  
        });
  
     //document.referrer returns the url from which this page has been entered,
     //we will use this to check if we are redirected from FAQs page
     var previous_url = document.referrer;
     if(previous_url=='http://dnwebdev.com/dev/faq/'){
     //if we were redirected from FAQ page, we would have a #section-value in our url
     //hash here fetched that value
     var hash = document.URL.substr(document.URL.indexOf('#')+1);
  
     //this is the important part, we are gonna trigger that the
     //#section-value passed in url is _clicked_. And so the browser will
     //scroll down to that section
     $('.navbar li a#a-'+hash).trigger('click');
     //once it scrolls down, this deletes the #section-value from url
     history.pushState('', document.title, window.location.pathname);
     }
  
  });
  
  
  
  
  function close_toggle() {
     $('.nav a').on('click', function () {
         if ($(".navbar-toggle").css("display") != "none") {
             $(".navbar-toggle").click();
         } else {
             $('.nav a').off('click');
         }
     });
  }
  close_toggle(); 
  
  
  
  
  $(window).resize(close_toggle);
        &lt;/script&gt; 
  </code></pre>
  
  <p>Currently the page jumps when an "easeOutExpo" is what we are going for.
  I am very new to JS, any input is appreciated.</p>
  
  <p>The website is <a href="http://dnwebdev.com/" rel="nofollow">http://dnwebdev.com/</a>
  I added jqueryUI, declared jquery before ui, but the scroll still won't work.</p>
  
  <p>Robert</p>