0

アンカーで動作する用語集ページがあります。「A」リンクをクリックすると #A に移動し、「B」をクリックすると「#B」リンクに移動します。しかし、これはアンカーにジャンプし、スクロールしたいと思います。

この幅のjavascritをどのように行うことができますか? HTML onclick に JavaScript を入れることはできますか?

これは私の実際のコードです:

<?php $categories =  get_categories('child_of=100&hide_empty=0'); 
        foreach  ($categories as $category) {
            //Display the sub category information using $category values like $category->cat_name
            echo '<h2><a name="' . $category->name . '">'.$category->name.'</a></h2>';
            echo '<ul>';
            $posts = get_posts(array('cat' => $category->term_id, 'order' => 'ASC', 'post_type' => 'glosario', 'showposts' =>-1, 'post_status' => 'publish,future,draft'));
            foreach ($posts as $post) {
                echo '<li><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></li>';  
            }  
            echo '</ul>';
        } ?>
          <div id="scrollablemenu">
<?php $cats = get_categories( 'child_of=100&hide_empty=0');
foreach ($cats as $cat) {
    echo '<a href="#' . $cat->cat_name . '" class="scrollablemenubutton" class="scroll">' . $cat->cat_name . '</a>';
}
?>


jQuery(document).ready(function() {
jQuery(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
 });

ありがとう！

4

1 に答える 1

2

jQuery ScrollTo() プラグインをお勧めします。

実装は非常に簡単で、再発明する必要はありません。

scrollTo の基本的な使用例を次に示します。

$( "a" ).click(function( event ) {
  event.preventDefault();
  $('body').scrollTo('#anId', 1000);
});

ここでライブ デモを参照してください。

onclick で使用する場合は、こちらのデモを参照してください。

where は#anId、リンクの名前や必要なものなど、何でもかまいません。次のように参照するだけです。

$(this).whatEverFunctionOrValueYouWant();
于 2013-11-14T14:37:43.690 に答える