跳转链接，如何跳转到页面上的下一个可用锚点？

我正在编写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; 
    } 
}

沃克的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;?>">

来源

2013-11-01 user2944846

下一步是在视图端口中显示的内容或下一个在最后单击的内容之后显示的内容？ – mplungjan

问候用户###，请您阅读http://stackoverflow.com/help。如果没有能够表现出自己的努力来解决您的情况，您的问题很可能会被投票结果或反对票。 –

除非问题的显而易见性不认为强制性代码。 – mplungjan

如果你需要你的出路它的代码例如，如果标签不给你足够的控制，尝试像

普通的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); 
    }); 
});

来源

2013-11-01 12:44:13 mplungjan

完美！现在我只需要添加平滑滚动，我们很好。感谢我的好人帮助。 – user2944846

查看更新。我会张贴jQuery你用jQuery标记或显示一些代码第一 – mplungjan

谢谢mplungjan，你摇滚！ – user2944846

尝试按TAB键。酷嗨？

您可以尝试使用：tabindex。

来源

2013-11-01 12:48:51

跳转链接，如何跳转到页面上的下一个可用锚点？

回答

相关问题