7

I've tried to implement smooth scrolling into an index of info. I've looked at this jsFiddle http://jsfiddle.net/9SDLw/ and I cannot get it to work. Does it matter where the code is inserted into the HTML Document or something?

Here is my code:

JS (in head of document):

<script type="text/javascript">
$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});​
</script>

Markup:

Link 

<a href = "#G" rel = "" id="G" class="anchorLink">G</a><br />

Anchor

<a name = "G" id="G"><span class = "letters">G</span></a><br />

What am I missing here?

mtk
  • 13,221
  • 16
  • 72
  • 112
bntrns
  • 454
  • 1
  • 8
  • 16

2 Answers2

10

jsBin demo

<ul id="links">
    <li><a href="#a">Go to a</a></li>
    <li><a href="#b">Go to b</a></li>
</ul>

and than somewhere in your document...

<h2 id="a">Article "a"</h2>
Lorem......
<h2 id="b">Article "b"</h2>
Lorem......

jQ:

$('#links a').click(function( e ){  
    e.preventDefault();
    var targetId = $(this).attr("href");
    var top = $(targetId).offset().top;
    $('html, body').stop().animate({scrollTop: top }, 1500);
});

what the above does is to use the retrieved anchor href and use it as jQuery's # (id) selector. Found that ID element, get it's top offset and finally animate the page.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • if I use this method, am I going to have to come up with tons of ID's? I wanted to implement the smooth scrolling to a list of test types, which are in alphabetical order. How could I do this using this method? – bntrns May 11 '12 at 17:57
  • @Ben you mean you want to have: `a_link, b_link ...` and the same time `a_content, b_content` etc, right? – Roko C. Buljan May 11 '12 at 17:58
  • Somewhat. Basically I just have a letter "A" with some CSS. Then on the sidebar I have an A which would correspond do that first A's anchor. And so on and so on down through the alphabet. So adding ID's would be a pain I think. – bntrns May 11 '12 at 17:59
  • sure, but than you don't need to even add those `a,b,c,d...`. The important thing is that you have one-content-per-link. If that's in your case, that it's pretty easy. I can show you if you want. – Roko C. Buljan May 11 '12 at 18:02
  • That would be much appreciated @Roko I'm pretty new to java and Jquery and it's quite frustrating to me. – bntrns May 11 '12 at 18:05
  • @Ben, I'll post an example soon. (P.S: JAVA != Javascript) – Roko C. Buljan May 11 '12 at 18:06
  • actually was thinking I should have added the Script to it. By no means can I even begin to learn Java. And Thank you, very much! – bntrns May 11 '12 at 18:07
  • exactly what I needed! Thanks, time to put it to action! – bntrns May 11 '12 at 18:16
  • Great! thanks. I just added the `.stop()` before the animation to prevent animations buildups: it allows you to quickly "refresh" the new lick animation action. – Roko C. Buljan May 11 '12 at 18:18
  • It scrolls smoothly when clicking one of the links, but it doesn't scroll smoothly when using the arrow keys. Would it be possible to make it scroll smoothly using the arrow keys as well? – Anderson Green Apr 02 '13 at 02:24
  • @AndersonGreen in FF runs pretty smoothly with arrow keys – Roko C. Buljan Apr 02 '13 at 09:44
  • 1
    It doesn't appear to be working in Google Chrome, though. (I think smooth scrolling is the default scrolling behavior in Firefox now. This explains why it's not working in Chrome). – Anderson Green Apr 02 '13 at 13:34
  • @AndersonGreen if you read the Question, the intended *Smoothness* it's not referenced on a scroll browser behavior, instead on clicking an element and *"scroll smoothly"* the page. In any case I think Chrome can be forced to smooth scroll also. JS of course. (return false on mousewheel scroll and apply animation on delta) – Roko C. Buljan Apr 02 '13 at 14:06
-1

You must wrap all your code with

$(document).ready(function(){ ... });

or just

$(function(){ ... });
awesoon
  • 32,469
  • 11
  • 74
  • 99
user2526475
  • 1