CODEWITHSUNDEEP
javascriptjqueryscrollto
bboy
bboy

Reputation: 1408

scrollTo effect jquery not working

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.

Upvotes: 0

Views: 2581

Answers (2)

wroniasty
wroniasty

Reputation: 8072

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.

Upvotes: 4

user1433049
user1433049

Reputation:

normally i use something like:

var targetOffset = $('#ommig').offset().top; 
$('html,body').animate({scrollTop: targetOffset}, 5000});

Also, you may need to return false; on the click event because otherwise the browser will navigate by itself to the destination or simply do something like

<a id="box1btn" href="javascript:;">Om Mig</a>
<div id="ommig">Title</a>

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

Upvotes: 1

Related Questions