javascript - jquery scrollintoview with bootstrap scrollspy -

javascript - jquery scrollintoview with bootstrap scrollspy -

hello fellow stackoverflow members utilize bootstrap! appreciate time , input. having problem implementing jquery.scrollintoview bootstrap scrollspy.

http://jsfiddle.net/akk2k/1/

above fiddle, scrollspy broken scrollintoview should still work, or mistaken?

nav buttons move page:

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

below scroll-to-section

<h3 class="center" id="section-2"> so, how can day & night help business today? </h3>

below js handles page scrolling / hiding url / etc.

the implementation happens @

$($(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 url page has been entered, //we utilize check if redirected faqs page var previous_url = document.referrer; if(previous_url=='http://dnwebdev.com/dev/faq/'){ //if redirected faq page, have #section-value in our url //hash here fetched value var hash = document.url.substr(document.url.indexof('#')+1); //this of import part, gonna trigger //#section-value passed in url _clicked_. , browser //scroll downwards section $('.navbar li a#a-'+hash).trigger('click'); //once scrolls down, deletes #section-value 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 page jumps when "easeoutexpo" going for. new js, input appreciated.

the website http://dnwebdev.com/ added jqueryui, declared jquery before ui, scroll still won't work.

robert

you invoking scrollintoview on raw dom element, when want invoke on jquery matched set. remove [0] , seek this:

$($(this).attr('href')).scrollintoview(250, "easeoutexpo");

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

(i've added jquery stuff fiddle).

javascript jquery html css twitter-bootstrap