Question

I am trying to get the scrollTo jquery work. Tried various tutorias/methods but none seem to work.
I am using it for a WP site and my idea is that there are some js files messing up each other.
The following .js are being used:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/my_script.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.hoverscroll.js"></script> 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.scrollto-1.4.2-min.js"></script>

and i use this to fire:

$(document).ready(function(){
$("#box1btn").click(function(){
$("#ommig").slideto({
slide_duration: 5000,
});
});
});

but the slide is not…sliding, it’s just jumping because the anchor.

<a id="box1btn" href="#ommig">Om Mig</a>
<div id="ommig">Title</a>

source: http://djpate.com/2011/01/01/animated-scrollto-effect-jquery-plugin/

NB! I also used scrollto by Ariel Flesler, but got the same.

any ideas?
Thank you in advanced.

Answer 1

To counter the effect of clicking on an anchor tag, you should use event.preventDefault().

$(document).ready(function(){
    $("#box1btn").click(function(event){
        event.preventDefault();  
        $('html, body').animate (
             {scrollTop: $('#ommig').offset().top}, 5000
        );        
    });
});

See it in action here: http://jsfiddle.net/mhnmt/1/

Edit: changed document.documentElement back to 'html, body' to fix Chrome issues.