CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10588

Scroll to top with JavaScript and CSS not working

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.

Upvotes: 1

Views: 327

Answers (1)

VVV
VVV

Reputation: 7593

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>

Upvotes: 3

Related Questions