I have a glossary page, that work with anchors. When you click on "A" link it go to #A, when you click on "B", it go to "#B". But this jump to the anchor and i would like it to scroll.
How can i did this width javascrit? Can i put a javascript in html onclick?
This my actual code:
<?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);
});
});
Thanks!
I would recommend jQuery ScrollTo() plugin ;
Very easy to implement, and you don't have to re-invent to wheel.
Here is a basic example of how to use scrollTo:
$( "a" ).click(function( event ) {
event.preventDefault();
$('body').scrollTo('#anId', 1000);
});
See live demo here .
If you want to use it with onclick, see demo here .
Note that where is says #anId
it could be anything, for example the name of the link or whatever you want, you just reference it like this:
$(this).whatEverFunctionOrValueYouWant();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.