Перейти к ссылкам, как перейти на следующий доступный якорь на странице?

Question

Я программирую один веб-сайт страницы в Wordpress, который использует ссылки перехода, чтобы перейти к конкретным привязкам на странице. Я делаю это, добавляя пользовательский ходок в Wordpress меню, которое изменяет ссылки меню на привязки. Я хочу создать кнопку, которая перейдет к следующему привязке на странице, независимо от имени анкера. Есть простой способ сделать это?

Вот мой код до сих пор:

JQuery для плавной прокрутки

$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 

    $('html,body').animate({ 
     scrollTop: target.offset().top 
    }, 2000,'swing'); 
    return false; 
    } 
} 

Walker в functions.php

class description_walker extends Walker_Nav_Menu{ 
    function start_el(&$output, $item, $depth, $args){ 
     global $wp_query; 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
     $class_names = $value = ''; 
     $classes = empty($item->classes) ? array() : (array) $item->classes; 
     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
     $class_names = ' class="'. esc_attr($class_names) . '"'; 
     $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; 
     $attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : ''; 
     $attributes .= ! empty($item->target)  ? ' target="' . esc_attr($item->target ) .'"' : ''; 
     $attributes .= ! empty($item->xfn)  ? ' rel="' . esc_attr($item->xfn  ) .'"' : ''; 
     if($item->object == 'page') 
     { 
      $varpost = get_post($item->object_id); 
      if(is_home()){ 
       $attributes .= ' href="#' . $varpost->post_name . '"'; 
      }else{ 
       $attributes .= ' href="'.home_url().'/#' . $varpost->post_name . '"'; 
      } 
     } 
     else 
      $attributes .= ! empty($item->url)  ? ' href="' . esc_attr($item->url  ) .'"' : ''; 
     $item_output = $args->before; 
     $item_output .= '<a'. $attributes .'>'; 
     $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID); 
     $item_output .= $args->link_after; 
     $item_output .= '</a>'; 
     $item_output .= $args->after; 
     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
} 

}

Вызов ходок в WordPress меню

wp_nav_menu(array(
      'theme_location' => 'primary_navi', 
      'echo' => true, 
      'walker'=> new Description_Walker, 
      'depth' => 4));  

Создание якоря в шаблон Wordpress

<div id="<?php echo $post->post_name;?>"> 

Answer 1

Если вам нужно закодировать ваш выход из него, например, если вкладка не дает достаточного контроля , попробовать что-то вроде

Plain JavaScript

Live Demo

var lastClicked=0-1,anchors=document.getElementsByTagName("a"); 

window.onload=function() { 
    document.getElementById("jumpbut").onclick=function() { 
    var hash = ""; 
    for (var i=lastClicked+1;i<anchors.length;i++) { 
     if (anchors[i].hash) { 
     hash=anchors[i].hash; 
     lastClicked=i; 
     break; 
     } 
    } 
    if (hash) location.hash=hash; 
    } 
} 

JQuery

Live Demo

$(function() { 
    var $anchors = $('a[href*=#]:not([href=#])'), 
     $target = $anchors.first(), 
     current=0; 
    $("#jumpbut").on("click",function() { 
    $('html,body').animate({ 
     scrollTop: $target.offset().top 
    }, 2000,'swing'); 
    $target = $anchors.eq(current+1); 
    }); 
}); 

Answer 2

Попробуйте нажать клавишу TAB. Круто эй?

Вы можете попробовать: tabindex.