2011-09-09 5 views
0

http://joelglovier.com에있는 스크립트를 사용하면 문서의 해당 섹션에 각 탐색 요소에 "활성"클래스를 추가 할 수 있습니다. 이 스크립트는 w3fools.com의 with permission에 맞게 작성되었으므로 시나리오를 염두에두고 작성했습니다.내 자바 스크립트가 브라우저가 링크로 이동하는 것을 막는 이유는 무엇입니까

w3fools.com에서 탐색 링크는 페이지의 요소 만 참조하는 반면 내 탐색에서는 끝에 새로운 페이지를 나타내는 요소가 하나 있습니다.

문제점은 제가 적응시킨대로 페이지의 섹션을 참조하는 링크에서 잘 작동한다는 것입니다. 그러나 (미안 - JS/jQuery 초보자) 내게 알려지지 않은 몇 가지 이유 때문에 브라우저가 새 페이지 (블로그 링크)에 대한 링크를 따르지 못하도록 차단하고 있습니다.

나는 코드를 읽고 스크립트가 무엇을하는지 이해하려고 노력했지만, 왜 외부 링크가 클릭되는 것을 막는 지 이해할 수 없거나 더 구체적으로 어떻게 수정해야하는지 이해하지 못했습니다.

아무도 내 목적을 위해 스크립트의 원래 기능을 깨지 않으면 서 내 문제를 해결할 수있는 가장 간단한 방법을 제안 할 수 있습니까?

가 여기 살고 참조 : ... http://joelglovier.com

또는를

마크 업 :

<div id="site-nav"> 

<div class="wrap"> 

    <nav id="nav-links"> 

      <a href="#jag-home" class="section-link scroll top">Top</a> 

      <a href="#background-section" class="section-link scroll skills">Background</a> 

      <a href="#projects-section" class="section-link scroll projects">Projects</a> 

      <a href="#random-section" class="section-link scroll random">Random</a> 

      <a href="#site-footer" class="section-link scroll credits">Credits</a> 

      <a href="http://blog.joelglovier.com" class="section-link blog" title="my tumblr">Blog <span class="icon"></span></a> 

    </nav> 

</div> 

자바 스크립트 :

(function($) { 
    $(function() { 

    var $nav = $('#nav-links'), 
     $navLinks = $nav.find('a.scroll'), 
     cache = {}; 
     $docEl = $(document.documentElement), 
     $body = $(document.body), 
     $window = $(window), 
     $scrollable = $body; // default scrollable thingy, which'll be body or docEl (html) 

    // find out what the hell to scroll (html or body) 
    // its like we can already tell - spooky 
    if ($docEl.scrollTop()) { 
     $scrollable = $docEl; 
    } else { 
     var bodyST = $body.scrollTop(); 
     // if scrolling the body doesn't do anything 
     if ($body.scrollTop(bodyST + 1).scrollTop() == bodyST) { 
      $scrollable = $docEl; 
     } else { 
      // we actually scrolled, so, er, undo it 
      $body.scrollTop(bodyST - 1); 
     } 
    }  

    // build cache 
    $navLinks.each(function(i,v) { 
     var href = $(this).attr('href'), 
      $target = $(href); 
     if ($target.length) { 
      cache[ this.href ] = { link: $(v), target: $target }; 
     } 
    }); 

    // handle nav links 
    $nav.delegate('a', 'click', function(e) { 
    // alert($scrollable.scrollTop()); 
     e.preventDefault(); // if you expected return false, *sigh* 
     if (cache[ this.href ] && cache[ this.href ].target) { 
      $scrollable.animate({ scrollTop: cache[ this.href ].target.position().top }, 600, 'swing'); 
     } 
    }); 

    // auto highlight nav links depending on doc position 
    var deferred = false, 
     timeout = false, // so gonna clear this later, you have NO idea 
     last = false, // makes sure the previous link gets un-activated 
     check = function() { 
      var scroll = $scrollable.scrollTop(), 
       height = $body.height(), 
       tolerance = $window.height() * (scroll/height); 

      $.each(cache, function(i, v) { 
       // if we're past the link's section, activate it 
       if (scroll + tolerance > v.target.position().top ) { 
        last && last.removeClass('active'); 
        last = v.link.addClass('active'); 
       } else { 
        v.link.removeClass('active'); 
        return false; // get outta this $.each 
       } 
      }); 

      // all done 
      clearTimeout(timeout); 
      deferred = false; 
     }; 

    // work on scroll, but debounced 
    var $document = $(document).scroll(function() { 
     // timeout hasn't been created yet 
     if (!deferred) { 
      timeout = setTimeout(check , 250); // defer this stuff 
      deferred = true; 
     } 
    }); 

    // fix any possible failed scroll events and fix the nav automatically 
    (function() { 
     $document.scroll(); 
     setTimeout(arguments.callee, 1500); 
    })(); 

}); 

}) (jQuery);

+0

에 코드를 변경하는 경우

는 내가 정말 사이트처럼 작동합니다. 매우 매끄러운 :) –

+0

감사합니다 Alastair! –

답변

3

현재 페이지에 존재하지 않는 "http : // ..."로 스크롤하려고 했으므로 실패하고 아무것도하지 않습니다. 당신이 여담으로이

// handle nav links 
$nav.delegate('a', 'click', function(e) { 
// alert($scrollable.scrollTop()); 
    e.preventDefault(); // if you expected return false, *sigh* 
    if (cache[ this.href ] && cache[ this.href ].target) { 
     // preserve http:// links 
     if (this.href.substr(0, "http://".length) == 'http://') 
      location.href = this.href; 
     else 
      $scrollable.animate({ scrollTop: cache[ this.href ].target.position().top }, 600, 'swing'); 
    } 
}); 
+0

Dang - 여전히 작동하지 않습니다. 나는 당신이 제안한대로 수정하고 생방송을 업로드했지만 주사위는 사용하지 않았다. –

+1

아 -하지만 방금 $ nav.delegate ('a', ... 'a.scroll'로 변경했습니다. –

관련 문제