Я попытался выполнить определенные шаги, чтобы моя страница перешла к конкретному нажатию клавиши.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="page-navigate" class="nav">
<li><a href="#A" data-link="A" class="current">A</a>
</li>
<li><a href="#B" data-link="B">B</a>
</li>
<li><a href="#C" data-link="C">C</a>
</li>
<li><a href="#D" data-link="D">D</a>
</li>
</ul>
</div>
</div>
</div>
<section id="A"></section>
<section id="B"></section>
<section id="C"></section>
<section id="D"></section>
Итак, я попробовал нажать клавишу вверх и вниз, используя jQuery, чтобы я мог напрямую дойти до определенного раздела. Код упоминается внутри jsfiddle: http://jsfiddle.net/coolshivster/qGjA4/2/ Мой код jQuery:
$(document).keyup(function (event) {
console.log("keyup is working");
var direction = null;
if (event.keyCode == 40) {
direction = 'next';
} else if (event.keyCode == 38) {
direction = 'prev';
console.log('previous click');
}
if (direction != null) {
console.log("wake up keys");
$('ul#page-navigate a.current').parent()[direction]().find('a').click();
var link = $('ul#page-navigate a.current').attr('data-link');
console.log('link is', link);
$('#' + link + '').slideDown("slow");
}
});
$('ul#page-navigate').on('click','a', function () {
$(this).parents('ul#page-navigate').find('li').each(function () {
$(this).find('a').removeClass('current');
});
$(this).addClass('current');
});
Теперь я попытался использовать разные вещи, например, перейти непосредственно к ссылке, используя slidedown, используя идентификатор раздела. Я попытался щелкнуть якорь на панели навигации, используя функцию click(). Но, все не удается или может быть некоторая ошибка в моем коде.
Заранее спасибо..!!!
Вы неправильно используете функцию slideDown. Он используется для выявления элемента, оживляя его высоту от 0px до любой его нормальной высоты. Это не имеет никакого отношения к прокрутке.
Вы хотите сделать что - то вроде этого, чтобы сделать то, что вы пытаетесь сделать. Помните, что анимационная часть является необязательной.
Вот простая, не анимированная версия:
$('html,body').scrollTop($('#' + link).offset().top)