Scroll to top with JavaScript and CSS not working

Question

I've been trying to implement a smooth scroll to top using the this CSS-Tricks Snippet.

Now I have the following HTML:

<!-- At the top of the page -->
<p id="content_jump" class="hide">
    <a id="#top"></a>
</p>

<!-- A bunch of content -->

<!-- At the bottom of the page -->
<a rel="nofollow" href="#top" id="backtotop" title="Go to top" onclick="scrollToTop();">
    Back to Top
</a>

Then I have the following script:

function scrollToTop() {
    $('html, body').animate({
        scrollTop: $("#top").offset().top
    }, 1000};
    return false;
}

I expect this to smoothly scroll to the top of the page over the period of 1 second.

However, when I click "Back to Top" it instantly goes to the top and the console provides me with the following error:

Uncaught TypeError: Cannot read property 'top' of undefined
    at scrollToTop ((index):274)
    at HTMLAnchorElement.onclick (VM1390 :245)

Any idea on a solution to the problem would be much appreciated.

you have id as #top , thats why your selector does not match — Deep
– Deep, Commented Jan 23, 2017 at 14:48
You have no element with the id of top. If you want to go to the top of the page just use scrollTop: 0 — Rory McCrossan
– Rory McCrossan, Commented Jan 23, 2017 at 14:48

Barry Michael Doyle · Accepted Answer · 2017-01-24 07:09:02Z

3

It's throwing that error because it can't find your element with an id of top.

Looking at your code, you have an error in your id name.

<a id="#top"></a>

should be

<a id="top"></a>

edited Jan 24, 2017 at 7:09

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

answered Jan 23, 2017 at 14:48

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barry Michael Doyle Over a year ago

Ah what a rookie error, thanks for spotting that! I'll accept soon :)

VVV Over a year ago

@BarryMichaelDoyle happens to the best of us!

Collectives™ on Stack Overflow

Scroll to top with JavaScript and CSS not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related