2014-06-21 5 views
3

안녕하세요, 동료 stackoverflow 멤버가 부트 스트랩을 사용합니다! 시간과 의견에 감사드립니다. 부트 스트랩 scrollspy로 jQuery.scrollintoview를 구현하는 데 문제가 있습니다.jquery scrollintoview with bootstrap scrollspy

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

위의 바이올린, scrollspy가 파손되지만 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"); 
에 "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> 

은 현재 페이지가 이동합니다. 저는 JS에 매우 익숙합니다. 모든 의견을 환영합니다.

웹 사이트 : http://dnwebdev.com/ ui 앞에 jquery로 선언 된 jqueryUI를 추가했지만 스크롤이 여전히 작동하지 않습니다.

로버트 당신이 JQuery와 일치 세트를 호출 할 때, 원시 DOM 요소에 scrollIntoView를 호출 할

+1

당신이 협업을 위해 바이올린을 만들면 답하고 싶은 사람들에게 도움이 될 것입니다. – edhedges

+1

나는 그것에 작동하고 가능한 경우 게시, 감사합니다! – Mintberry

+1

jquery 또는 jquery UI를 사용하고 있습니까? –

답변

0

합니다. [0]를 제거하고 이것을 시도 :

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

바이올린 : http://jsfiddle.net/aKK2k/7/

(나는 또한 바이올린에 JQuery와 물건을 추가했습니다).

+0

을 제거하면 [0]은 스크롤을 끊습니다. – Mintberry

+0

무엇을 의미합니까? 내가 올린 피들을 봤니? –

+0

페이지가로드 될 때 스크롤하지 않으면 작동하지 않습니다. 이것은 내가 필요로하는 것에 아주 가깝지만 거기에는 아주 가깝지 않다. 편집 : 페이지가 스크롤되면 모든 작업이 중단됩니다. – Mintberry