jquery scrollintoview with bootstrap scrollspy

Question

Hello fellow stackoverflow members who use bootstrap! I appreciate your time and input. I am having trouble implementing a jQuery.scrollintoview with bootstrap scrollspy.

http://jsfiddle.net/aKK2k/1/

Above is fiddle, scrollspy is broken but the scrollintoview should still work, or am i mistaken?

Nav buttons that move the page:

 <li>
            <a href="#section-2" id="a-section-2">
              Products
            </a>
 </li>

Below is the scroll-to-section

 <h3 class="center" id="section-2">
       So, how can Day & Night help your business today?
 </h3>

Below is the JS that handles the page scrolling / hiding url / etc.

The implementation happens at

$($(this).attr('href'))[0].scrollIntoView(250, "easeOutExpo");

The whole JS

  <script>
 $("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() <= 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);
      </script> 

Currently the page jumps when an "easeOutExpo" is what we are going for. I am very new to JS, any input is appreciated.

The website is http://dnwebdev.com/ I added jqueryUI, declared jquery before ui, but the scroll still won't work.

Robert

Answer 1

You are invoking scrollIntoView on the raw DOM element, when you want to invoke it on the jquery matched set. Remove the [0] and try this:

$($(this).attr('href')).scrollIntoView(250, "easeOutExpo");

fiddle: http://jsfiddle.net/aKK2k/7/

(i've also added the jquery stuff to your fiddle).