CODEWITHSUNDEEP
javascripthtmlmootoolsanchor
bl00dyg33k
bl00dyg33k

Reputation: 13

MooTools Fx.SmoothScroll for internal links not working on my site

I'm working on a project that I wish to have smooth scrolling on. I've taken a look at all available documentation from mootools.net and this post from David Walsh on the topic. Copy-pasting code doesn't seem to work, and the only difference that I see is the version of MooTools used(1.4.5 here)—and the function name seems to be the same as 1.2. Chrome 23 throws the error "Uncaught TypeError: undefined is not a function" but I can't find an error in Firebug. Doesn't scroll properly in Firefox either.

Code:

<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
    window.addEvent('domready',function() {
        new Fx.SmoothScroll({
            duration: 200
        },window);
    });
</script>
</head>

<body>
<a href='#one'>One</a>
<h3 id="one">One</h3>
</body>

I'm also relatively new to JavaScript as well, so if you could explain the process, it'd help a lot! Thanks in advance.

Upvotes: 1

Views: 1070

Answers (1)

Julian H. Lam
Julian H. Lam

Reputation: 26134

Looks like I've gotten it to work in this jsFiddle. Perhaps this will give you a clue as to what is going on? http://jsfiddle.net/6NNBV/

Update:

To have it load on page load, try this:

window.addEvent('domready', function() {
    new Fx.SmoothScroll();
});

Edit: Disregard below:

I believe page anchors do not work on the id of the target element, but rather, the name property.

Try adding a name property to the h3 element.

Upvotes: 1

Related Questions