我有一个词汇表页面,可用于锚点。当您单击“ 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);
});
});
谢谢!
我会推荐jQuery ScrollTo()插件;
实施起来非常容易,您无需重新发明。
这是如何使用scrollTo的基本示例:
$( "a" ).click(function( event ) {
event.preventDefault();
$('body').scrollTo('#anId', 1000);
});
在这里观看现场演示。
如果您想将其与onclick一起使用,请参见此处的演示。
请注意,在哪里可以说它#anId
可以是任何东西,例如链接的名称或您想要的任何东西,您只需像这样引用它:
$(this).whatEverFunctionOrValueYouWant();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句