0

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.

bboy
  • 1,357
  • 2
  • 15
  • 31

2 Answers2

4

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.

wroniasty
  • 7,884
  • 2
  • 32
  • 24
  • 1
    Protip: use `document.documentElement` instead of querying for a `html` tag: `$(document.documentElement).animate({ ... });` – Mattias Buelens Jun 03 '12 at 15:57
  • @MattiasBuelens why? i changed, but it would be cool if you can shortly explain, or give a link. anyways, thank you for taking the time to improve the answer/solution. – bboy Jun 03 '12 at 17:48
  • @bboy [`documentElement`](https://developer.mozilla.org/en/DOM/document.documentElement) points to the root element of the document, which is the `html` element for HTML pages. `$('html')` would need to do a `document.getElementsByTagName` which is not that expensive, but most likely still slower than `$(document.documentElement)`. If you look at the source of jQuery, constructing a jQuery object from a `DOMElement` is handled by the second `if` block of `jQuery.fn.init`. No calculations or parsing needs to be done, it just sets three properties and returns. – Mattias Buelens Jun 03 '12 at 21:24
  • @MattiasBuelens thank you! i return with one small question/problem. the slider is not working in Chrome :/ any ideas? – bboy Jun 04 '12 at 07:38
  • @bboy seems scrolling document.documentElement is not working in Chrome – wroniasty Jun 04 '12 at 08:00
  • ok, i'm not sure it's the correct sintax, but it works in both chrome and firefox if i put `('html, body')` this works in Chrome and Firefox and IE9 - tested `$(document).ready(function(){ $("#box1btn").click(function(event){ event.preventDefault(); $('html, body').animate ( {scrollTop: $('#ommig').offset().top}, 5000 ); }); });` – bboy Jun 04 '12 at 08:20
  • @bboy I remember seeing this somewhere. `$('html, body')` will work, or you could micro-optimize this once more with `$([document.documentElement, document.body])` - although I must admit that this may become unreadable. You might be better off using the `slideto` plugin which neatly wraps this. – Mattias Buelens Jun 04 '12 at 11:49
  • @MattiasBuelens thank you! i tried several plugins, thats why i came here and asked. but it works all fine with `$('html, body')` so i will just leave it. thank you for the time! – bboy Jun 04 '12 at 11:56
1

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});
});
});