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);
에 코드를 변경하는 경우
는 내가 정말 사이트처럼 작동합니다. 매우 매끄러운 :) –
감사합니다 Alastair! –