Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jquery ScrollTo not working

    Hello,

    Well I'm another one of those new people who is not a javascript person. I have scoured the threads and have tried to implement everything I could find but it is still NOT working. I have a one page portfolio website and I want the person to click the link and it jumps down to the div containing that link. I don't know if divs need to be in the same wrapper because I have different widths for everything. Here is what I have, any help is greatly appreciated. Below is the code in the head and the navigation in the body.

    <head>

    <style type="text/css">

    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src='jquery-1.4.3.min.js'></script>
    <script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
    <script type='text/javascript'>jQuery(function( $ ){
    //borrowed from jQuery easing plugin
    //http://gsgd.co.uk/sandbox/jquery.easing.php
    $.scrollTo.defaults.axis = 'xy';
    $.easing.elasout = function(x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    };
    });</script>


    </head>

    <body>

    <div id="navcontainer">
    <ul id="navlist">
    <a href="#" onclick="$.scrollTo( '#about', 8000, {easing:'elasout'} );">about</a>
    <a href="#" onclick="$.scrollTo( '#work', 8000, {easing:'elasout'} );">work</a>
    <a href="#" onclick="$.scrollTo( '#services', 8000, {easing:'elasout'} );">services</a>
    <a href="#" onclick="$.scrollTo( '#contact', 8000, {easing:'elasout'} );">contact</a>
    </ul>
    </div>

    </body>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Two things I have in mind

    1. The scrollTo is referring to an id rather than the usual name attribute for hash jumps
    2. Make sure you "return false" when using anchor tags with onclick handlers

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply, like I said, I am completely new with javascript.

    Two things I have in mind
    The scrollTo is referring to an id rather than the usual name attribute for hash jumps
    -is there any way I can fix this?
    Make sure you "return false" when using anchor tags with onclick handlers
    -where do I put the return false, in the actual javascript file or somewhere in the script in the head or in the link that holds the link?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I can't see anything wrong with the code you've posted, assuming of course you've also got elements with matching ids to actually scroll to.

    Have you checked that your paths to jQuery and to the scrollTo plugin are correct, and that the files exist on your server?

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I put the two scripts in a js folder in the root folder that holds all the files for my site, i dont know if it is finding this. This is what the code looks like in my body when you click the link you should pop down to this anchor, am I doing this part wrong possibly? I just want the person to click about at the navigation and be scrolled down to this part, is this really so difficult? The back to top part doesn't have animation to it it just pops up to the top so the script is not working at all.

    <div id="content">
    <div id="about">
    <a name="anchor1"></a>
    <h1>About</h1>
    <h2>Information about me </h2>
    <a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">top</a>
    </div>

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <script type='text/javascript' src='js/jquery-1.4.3.min.js'></script>
    <script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>

    I fixed the file path it wasn't reading js/jquery... that still did nothing

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The div's fine, all you need is an element with id of about

    Can you give a link to a live page?

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    To make myself clear: All you need to do is to take the code you posted first, add a "return false" to all onclick handlers
    Code:
    onclick="$.scrollTo( '#about', 8000, {easing:'elasout'} ); return false;"
    and make sure that elements (divs) with the corresponding id's (like id="about") exist on the page

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The absence of return:false here would not prevent the scroll happening. The OPs code has no default action in any case since the links are set with href="#".

    There must be some other issue, which is why it would help to see a live page.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The default action for an empty hash anchor "#" is "jump to the top of the page" which is exactly not supposed to happen here

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Using the OP's code, unchanged except for the addition of an appropriately id'd div, the scroll works fine.

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    EDIT: Ok, I used jsbin.com to test the page ... and it uses frames. As soon as the code runs inside a frame, the # default action will make the page jump before the animation has finished.

    But using it as a "normal" page it works fine
    Last edited by devnull69; 12-27-2010 at 06:12 PM.

  • Users who have thanked devnull69 for this post:

    11va17bene (12-27-2010)

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I see different behaviour on a test page here, using FF3.
    Ah, reading your post again I see what you mean, sorry.

  • #14
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    solved

    I had my scripts in the wrong place, they were with my css styles I had to move them out of the style and it worked. Thanks everyone for your help.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •