Всем привет. Заморочился я тут запилить собственный плагин скролла до якоря. Вот один экземпляр скипта на странице работает норм, а два уже некорректно. Не могу понять в чём дело. Окинте, пожалуйста, незамыленным взглядом мой быдлокод и может вы увидите что я проглядел по причине своих скромных знаний js.
<head>
<meta charset="utf-8" />
<title>$(selector).waypoint(offset)</title>
<style type="text/css">
html, body, div, ul, li, a, h1 {margin: 0; padding: 0}
a:active, a:focus {outline: 0}
ul {list-style: none}
a, a:visited {color: black}
a:hover, a.active {background: gray}
a:hover, a:active {text-decoration: none}
.navBox {position: fixed; width: 100%; top: 0; background: lightgray}
.nav {text-align: center}
.nav .item {display: inline-block; *display: inline; *zoom: 1}
.nav .ref, .sidebar .ref {display: block; text-decoration: none; font: normal 20px/50px Arial; padding: 0 20px; text-transform: uppercase}
.main {margin-top: 50px}
.section {height: 1000px; border: 1px solid black; margin-top: 20px}
.subSection {height: 500px; margin-top: 461px; border: 1px solid green}
.sidebar {position: fixed; right: 0; background: lightgray}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/**
* Вариант метода waypoint(offset), который перелинковывает все ссылки селектора с якорями.
* $(selector).waypoint(offset);
* Примеры использования.
* $(selector).waypoint('25%');
* $(selector).waypoint('300px');
*/
(function ($)
{
//Декларация метода waypoint.
$.fn.waypoint = function (offset)
{
var refs = this;
this.elems = $('*[id]');
//Помещаем с свойство linx все ссылки, указывающие на элемент.
for (var a = 0; a < this.elems.length; a++)
{
var cur = this.elems[a].id;
if (!this.elems[a].linx || this.elems[a].linx.length == 0)
this.elems[a].linx = this.filter(function (index) { return this.hash == '#' + cur; });
for (var b = 0; b < this.elems[a].linx.length; b++)
{
this.elems[a].linx.eq(b)[0].anchor = this.elems[a];
}
}
//Вешаем анимацию скролла при клике по ссылке.
this.each(function ()
{
$(this).on('click', function (event)
{
event.preventDefault();
var anchor = this.anchor;
$('html, body').animate({ scrollTop: anchor.offsetTop }, 'fast');
});
});
//Если объект offset не передан, устанавливаем значение по умолчанию,
//равное половине высоты окна браузера.
if (!offset) var offset = parseInt($(window).height() / 2, 10);
else
{
//Проценты.
if (offset.search('%') != -1)
offset = parseInt($(window).height() / 100 * parseInt(offset, 10), 10);
//Пиксели.
else if (offset.search('px') != -1)
offset = parseInt(offset, 10);
}
//Обработчик события скролла.
function waypoint(event)
{
//console.log(waypoint.params);
var switchPoint = waypoint.params;
waypoint.elems.each(function ()
{
if (this.offsetTop < $(window).scrollTop() + switchPoint &&
this.offsetTop + $(this).height() > $(window).scrollTop() + switchPoint)
{
waypoint.elems.each(function () { this.linx.removeClass('active'); /*console.log(this.id + ' ' + this.linx[0]);*/ });
this.linx.addClass('active');
console.log(waypoint.params);
}
});
}
waypoint.params = offset;
waypoint.elems = this.elems;
if (!window.scrollHandlers) window.scrollHandlers = [];
window.scrollHandlers.push(waypoint);
if (!window.runScrollHandlers)
{
window.runScrollHandlers = function ()
{
for (var a = 0; a < window.scrollHandlers.length; a++)
window.scrollHandlers[a]();
}
$(window).bind('scroll', window.runScrollHandlers);
}
window.runScrollHandlers();
return this;
}
})(jQuery);
//Использование метода waypoint.
$(function ()
{
$('.nav .ref').waypoint('0px');
$('.sidebar .ref').waypoint('300px');
});
</script>
</head>
<body>
<div class="navBox">
<ul class="nav">
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block1">block1</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block2">block2</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block3">block3</a></li>
</ul>
</div>
<ul class="sidebar">
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div1">Div1</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div2">Div2</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div3">Div3</a></li>
</ul>
<div class="main">
<div class="section" id="block1">
<h1>block1</h1>
<div class="subSection" id="Div1">
<h1>Div1</h1>
</div>
</div>
<div class="section" id="block2">
<h1>block2</h1>
<div class="subSection" id="Div2">
<h1>Div2</h1>
</div>
</div>
<div class="section" id="block3">
<h1>block3</h1>
<div class="subSection" id="Div3">
<h1>Div3</h1>
</div>
</div>
</div>
</body>