jquery scrollintoview with bootstrap scrollspy

时间:2014-06-21 14:32:06

标签: javascript jquery html css twitter-bootstrap

你好使用bootstrap的stackoverflow成员!我感谢你的时间和投入。我在使用bootstrap scrollspy实现jQuery.scrollintoview时遇到了麻烦。

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

上面是小提琴,rolllspy被打破但是scrollintoview应该仍然有用,或者我错了?

导航页面的导航按钮:

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

下面是滚动到部分

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

以下是处理页面滚动/隐藏URL等的JS。

实施发生在

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

整个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> 

目前,当&#34; easeOutExpo&#34;是我们的目标。 我对JS很新,任何意见都表示赞赏。

该网站为http://dnwebdev.com/ 我添加了jqueryUI,在ui之前声明了jquery,但滚动仍然无法工作。

罗伯特

1 个答案:

答案 0 :(得分:0)

如果要在jquery匹配集上调用它,则在原始DOM元素上调用scrollIntoView。删除[0]并尝试此操作:

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

小提琴:http://jsfiddle.net/aKK2k/7/

(我还将jquery的东西添加到你的小提琴中)。