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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Jqueryscrollto not scrolling just jumping

    Hi i'm trying to get a jqueryscrollto working but its not scrolling its just jumping to the final destination.

    I'm extremely new to coding so its probably something really simple that i'm doing wrong.
    I couldn't get it working on my actual website which is why i thought i'd try and get it working by creating a simple example but i can't seem t get this working either!

    I've tried adjusting the time as i read somewhere that that should help but it hasn't made any difference.

    here is the code i have written so far:

    Code:
    </style>
    </head>
    <script type="text/javascript" src="jquery.min.js"></script>
    </head>
    </div>
    <script type="text/javascript" src="jquery-1.4.2.min.js"
    </head>
    
    $(document).ready(function(){
    ('a.topOfPage').click(function(){
    $.scrollTo( 0,9000);
    return false;
    });
    });
    </script>
    If anyone has any suggestions i'd be really grateful as have been trying to work this out for ages but am totally confused now!

    Thank you

    Hannah

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    whoa whoa whoa ... is this a snippet of your actual code?

    - you have three(!) closing tags for </head>
    - you have jQuery twice (never a good idea!)
    - is this $.scrollTo a plug-in you are using? Is it the one by Arial Flesler? http://flesler.blogspot.de/2007/10/jqueryscrollto.html Did you notice the "Troubleshooting" section in his article?
    - did you actually include the plug-in?

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, i did originally try to use the website that you just said but i got confused so found another one where they broke down the steps a bit more, think it still uses the same code though.

    I thought that (and this is probably wrong!!) that the one of my jquery bits is the library and the other is the plugin?

    I'll remove the extra closing tags for heads now! thanks!!

    Hannah

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    No, both script tag reference the full jQuery library. The code line for the plug-in will be more like
    Code:
    <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
    Make sure to put this line after(!) the line for jQuery

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh right ok then thank you, and do i have to download this plug in from somewhere and put it in the same folder as i did with the full library?

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Definitely ... this is the best guess for downloading this plug-in: http://flesler.blogspot.de/2007/10/jqueryscrollto.html

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi thanks for that link i've downloaded that and used the code gave me to get it to look for it, and that all seems to be working, however my scroll still isn't scrolling! I've made all the adjustments you suggested so i can't see why!

    Heres the code so far



    Code:
    #apDiv3 {
    	position:absolute;
    	left:910px;
    	top:1069px;
    	width:240px;
    	height:58px;
    	z-index:3;
    }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    </div>
    <script type="text/javascript" src="jquery-1.scrollTo-1.4.2-min.js">
    $(document).ready(function(){
    ('a.apDiv3').click(function(){
    $.scrollTo(5,9000);
    return false;
    });
    });
    </script>
    </head>
    <body>
    <div id="apDiv3"><a href="#" class="topOfPage">Top of page</a></div>
    <div></div>
    </body>
    </html>
    Do you have any idea what i should do next?
    Thank you so much for all your help so far

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Your click selector doesn't match any element on the page. 'a.apDiv3' would only apply to <a> anchor elements with class="apDiv3". But the class of your anchor is "topOfPage"
    Code:
    $('a.topOfPage').click(function() {
       ...
    });

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, yeah i had that originally but then changed it, have changed it back again now but still no luck! I'm not sure its even jumping to the correct destination as when i change the numbers in the brackets it still always pings straight to the top! Its as if that codes not even there!!

    Thanks for all your help so far i'm extremely grateful!

    Hannah

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Can you provide us with a URL for your code? What I see here still seems to be incomplete and kind of messy (a dangling </div> for example)

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi yes here is my url: http://evolvefashion.co.uk/testpage.html

    Thank you

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Ahem I'm sorry, but

    1. You need jQuery (check)
    2. You need the scrollTo plug-in (check)
    3. You need your own code to call the plug-in (ERROR: missing). From your code above I see the error: You tried to include the plug-in and write your code into the same <script> tag. This is not possible. You need one script tag for the plug-in and another one for your script
    Code:
    <script type="text/javascript" src="jquery-1.scrollTo-1.4.2-min.js"></script>
    <script>
    $(document).ready(function(){
       $('a.topOfPage').click(function(e){
          $.scrollTo(5,9000);
          e.preventDefault();
          return false;
       });
    });
    </script>

  • Users who have thanked devnull69 for this post:

    HannahS (03-30-2012)

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi thank you very much its now working! Thanks so much for all your help, really kind of you

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, sorry to bother you again. I was just wondering if you'd be able to tell me how i can apply the jquery scrollto to an image instead of the text link. I've been playing around with it but i just can't seem to get it to work. I wasn't sure how to make the image clickable so googled it and applied a map to it, not sure if thats the right thing to do or not.

    Heres my website so far www.evolvefashion.co.uk/testpage.html

    Thanks for any help you can offer me.

  • #15
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    There's no need for a map. Just wrap the <img> tag in an <a> anchor tag.
    Code:
    <a href="#"><img src="yourimage.jpg" /></a>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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