我有一个页面，在桌面设备上，只能使用滚动按钮或导航窗格进行导航。 Fiddle here.
以下是基本的HTML模板：
<header class="listGenHeader">
<nav class="top-mid">
<ul>
<!-- .viewport navigation menu -->
</ul>
</nav>
<nav class="top-right">
<ul>
<!-- Main navigation menu -->
</ul>
</nav>
<nav class="mobile-nav">
<!-- Mobile navigation menu -->
</nav>
</header>
<div class="sales-pitch viewport">
<!-- First .viewport -->
</div>
<div class="chooseTemplate viewport">
<!-- Second .viewport -->
</div>
<div class="companyLogo viewport">
<!-- Third .viewport -->
</div>
每次滚动窗口时，active类都会从当前.viewport和当前ul.top-mid a中移除，并添加到新的.viewport及其对应的{ {1}}具有以下三个（非常相似）函数：
ul.top-mid a很明显，这三个函数产生的结果基本相同（添加/删除// Get an array of class names
var cls = $('.top-mid a').map(function(){
return $(this).attr('class');
});
// Scrolling Down
$('.scrollDown').click(function(e){
// Keep page from trying to load hyperlinks
e.preventDefault();
// if We're at the top of the page,
// hide 'get started' button
if ($('.getStarted:visible')) {
$('.getStarted').fadeOut();
}
// Figure out what the next .viewport element is in the DOM
var nextView = $('.viewport.active').next('.viewport');
// If the next is the final, we don't need the scroll-down button anymore
if (nextView.is('.viewport:last')) {
$(this).fadeOut();
$('.listGenFooter').animate({'bottom': '0'}, 300);
}
// Trade the main nav pane for the form sections nav
// if we're scrolling down from the first viewport
if ($('.top-right').is(':visible')) {
$('.top-right').fadeOut(function(){
$('a.logo').css({'position': 'fixed', 'top': '0', 'left': '0'})
.animate({'left': '-10%'}, 300, function(){
$('.top-mid').fadeIn();
$('.mobile-nav').fadeIn();
});
});
}
// Show the scroll-up button, since we CAN scroll up
$('.scrollUp').fadeIn();
// Animate window to next viewport and remove
// 'active' class from current viewport
$('html, body').animate({scrollTop: nextView.offset().top}, 500);
$('.viewport.active').removeClass('active');
nextView.addClass('active');
// loop through class names and highight
// active item on the form sections nav
for (var i = 0; i < cls.length; i++) {
if (nextView.hasClass(cls[i])) {
$('.top-mid a.' + cls[i]).addClass('active');
$('.top-mid a.active').next('.triangle').show();
$('.top-mid a').not('.' + cls[i]).removeClass('active');
$('.top-mid a').not('.' + cls[i]).next('.triangle').hide();
}
}
});
// Scrolling up
$('.scrollUp').click(function(e){
// Keep page from trying to load hyperlinks
e.preventDefault();
// Get previous viewport
var prevView = $('.viewport.active').prev('.viewport');
// If previous is the FIRST viewport, hide scroll-up button,
// show get-started button and trade form sections nav
// for the main nav again
if (prevView.is('.sales-pitch')) {
$('.scrollUp').fadeOut();
$('.getStarted').fadeIn();
$('.top-mid').fadeOut(function(){
$('.mobile-nav, a.logo').hide(function(){
$('.top-right').fadeIn();
$('a.logo').css({'position': 'relative', 'top': '', 'left': ''}).fadeIn();
});
});
}
// If we're scrolling UP from the last viewport on the page,
// show the scroll-down button again
if ($('.viewport.active').is('.viewport:last')) {
$('.scrollDown').fadeIn();
$('.listGenFooter').animate({'bottom': '-100px'}, 300);
}
// Animate window to previous viewport
$('html, body').animate({scrollTop: prevView.offset().top}, 500);
// Remove 'active' class from current viewport
// and add it to the one we're scrolling to.
$('.viewport.active').removeClass('active');
prevView.addClass('active');
// Also highlight/unhighlight corresponding list items
// in the form sections nav
for (var i = 0; i < cls.length; i++) {
if (prevView.hasClass(cls[i])) {
$('.top-mid a.' + cls[i]).addClass('active');
$('.top-mid a').not('.' + cls[i]).removeClass('active');
$('.top-mid a.active').next('.triangle').show();
$('.top-mid a').not('.active').next('.triangle').hide();
}
}
});
// Navigating via the form sections nav pane
$('.top-mid a').click(function(e){
// Keep page from trying to load hyperlinks
e.preventDefault();
var self = $(this);
for (var i = 0; i < cls.length; i++) {
if (self.hasClass(cls[i])) {
// If next viewport is LAST viewport
if (cls[i] === "companyLogo") {
// Hide scroll-down button and show footer
$('.scrollDown').fadeOut();
$('.listGenFooter').animate({'bottom': '0'}, 300);
// Else show scroll-down button and hide footer
} else {
$('.scrollDown').show();
$('.listGenFooter').animate({'bottom': '-100px'}, 300);
}
// Default behavior: scroll to viewport and toggle 'active' class
// for visible viewport
$('html, body').animate({scrollTop: $('.' + cls[i] + '.viewport').offset().top}, 500);
$('.top-mid a.' + cls[i]).addClass('active');
$('.viewport.' + cls[i]).addClass('active');
$('.viewport').not('.' + cls[i] + '.viewport').removeClass('active');
$('.top-mid a').not('.' + cls[i]).removeClass('active');
}
}
// Toggle highlight triangles
$('.top-mid a.active').next('.triangle').show();
$('.top-mid a:not(.active)').next('.triangle').hide();
});
类并突出显示相应的菜单项），但我找不到简化它们的方法（它看起来很像对我来说很复杂，我实际上知道我在看什么。任何建议都会很棒。