jQuery animate scroll to anchor

Question

The animate doesn't work, can you tell me what I'm doing wrong?

<a id="pediatric-primary-health-care" href="#" class="anchor">&nbsp;</a>

<script>
    jQuery(document).ready(function() {
        function scrollToAnchor(aid){
            var aTag = jQuery("a[name='"+ aid +"']");
            jQuery('html,body').animate({
                scrollTop: aTag.offset().top
            }, 'slow');
        }
        jQuery("a").click(function() {
            var href = jQuery(this).attr('href').replace('#', '')
            scrollToAnchor(href);
        });
    });
</script>

Possible duplicate of [Simple jQuery scroll to anchor up or down the page...?](http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page) — James Hill, Nov 17 '16 at 10:14
@JamesHill It's a big syntax error and OP wants to know what is the issue. Not that OP is asking for a code. — Praveen Kumar Purushothaman, Nov 17 '16 at 10:15

score 0 · Answer 1 · answered Nov 17 '16 at 10:14

0

The syntax of the JavaScript itself is wrong. You have:

jQuery('html,body').animate({
    jQuery('html,body').animate({scrollTop: aTag.offset().top},'slow');

While the animate function just expects an object with CSS properties. Get rid of the first one. Atleast now people should understand the importance of indenting the code.

var aTag = jQuery("a[name='" + aid + "']");
jQuery('html,body').animate({
  scrollTop: aTag.offset().top
}, 'slow');

Also, to not get the # at the end of the URL, you can use event.preventDefault():

jQuery("a").click(function(e) {
    e.preventDefault();
    scrollToAnchor($(this));
});

answered Nov 17 '16 at 10:14

Praveen Kumar Purushothaman

164,888
24
203
252

Thank you! I'm a javascript-beginner... This is my code now, ...but it doesn't work yet. the # shoud stay in the URL, so this is ok. Only the animation is the problem. – Colette Nov 17 '16 at 10:25
@ColetteGüntensperger I am not a JavaScript interpreter. I can't understand a thing you wrote in the comment. Please edit your original question and add it. `:)` – Praveen Kumar Purushothaman Nov 17 '16 at 10:26
@ColetteGüntensperger Please [**edit your question**](http://stackoverflow.com/posts/40652063/edit) and add your new script. `:)` Waiting for you. – Praveen Kumar Purushothaman Nov 17 '16 at 10:28
@ColetteGüntensperger Saw your current code. And it should work now... `:)` – Praveen Kumar Purushothaman Nov 17 '16 at 10:29
Phuu, this is my first question, i'm sorry.. I just editing now my script :-) Thank you! – Colette Nov 17 '16 at 10:30
@ColetteGüntensperger Don't worry, no one shouted at you. I am just guiding you how to use it best... `:)` – Praveen Kumar Purushothaman Nov 17 '16 at 10:30
@ColetteGüntensperger Can you please add the relevant HTML as well, please? – Praveen Kumar Purushothaman Nov 17 '16 at 10:30
@Colette The part with `href` and the place where it should go. – Praveen Kumar Purushothaman Nov 17 '16 at 10:42
@Colette Brilliant. I didn't see it has been added. Always see the preview before you save. Also, I would need the code of element with the `id="href"`. Can you provide that as well? – Praveen Kumar Purushothaman Nov 17 '16 at 10:43
Ok, than I added the right line. Every Menuitem should go tho this line (naturally with different IDs) – Colette Nov 17 '16 at 10:45
@Colette I strongly believe the issue is with the whole code. Can you go to [JSBin](http://jsbin.com) and add your full code and send me the link here, please? Thanks. – Praveen Kumar Purushothaman Nov 17 '16 at 10:51
@Colette Looking at it. Looks nice. – Praveen Kumar Purushothaman Nov 17 '16 at 11:04
@Colette It is redirecting. – Praveen Kumar Purushothaman Nov 17 '16 at 11:24
What do you meen? The problem is because the redirecting? – Colette Nov 17 '16 at 12:01
@Colette Kinda yes... Unable to repro... What I see is totally different. – Praveen Kumar Purushothaman Nov 17 '16 at 12:02

jQuery animate scroll to anchor

1 Answers1