scrollTop not working

I have used scrollTop many times earlier but does not seem to work this time. I tried all the options like changing jquery version, tried all the way from 1.10 to the latest 3.X version.

If I add scrollTop to document.ready no errors are displayed but it does not scroll to top.

If i try via window.load then it displays error

Uncaught TypeError: $ is not a function

But jquery is already loaded much before this.

So any one else faced a similar situation and what to do?

The code I have tried are

<script>
$(window).load(function(){

$('html, body').animate({ scrollTop: 0 }, 'slow');
}) 

</script>

for later versions I also tried
$(window).on('load', function()

Then I also tried changing $ to jQuery 

I also tried without any animation

$(document).scrollTop();

and also set html, body to min height and height as 100% and overflow auto

any help? Thanks!

Got a demo or a link to a page where we can see this happening?

@James_Hibbard no as its under development. I also tried using the base wordpress theme too yet the error occurs. I even tried disabling all plugins but yet error occurs. Is there any other option to scrollTop? like some other way scrolling can be achieved? Basically the issue is when a multi page form is clicked to next it stops at the bottom of the page so a user has to manually scroll to the top. To improve user experience I had added the scrollTop so that it automatically reaches the top . Thanks

Nope. Basically the issue is that the jQuery alias $ is not defined.

My only suggestions: try jQuery('html, body').animate({ scrollTop: 0 }, 'slow');

Other than that, if you are unable to provide a demo then cant help. Sorry.

Ok I tried your suggestion of adding jQuery instead of $

so my code now is

<script>
jQuery(window).load(function(){

jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
}) ;

</script>

So first time the page loads the page does scroll to the top. But once I click on the form and if page refreshes then it generates error

Uncaught ReferenceError: jQuery is not defined

i also tried changing the .load to

<script>
jQuery(window).on('load', function(){

jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
}) ;

</script>

same effect. 1st time it loads and runs fine, but once page refreshes or if form throws error (for example name not added error) or something then the scrollTop effect stops working and the above error is generated.

The problem is not with the code. The problem is with whatever else is going on on your page. I can only repeat:

Ultimately, you are not loading in jQuery, so that’s the underlying issue.

1 Like

Or the script order is incorrect, or jQuery is running in compatibility mode, or one of a dozen other things … I don’t understand why making a small, self-contained example that demonstrates the issue is a big deal.

1 Like

WordPress handles JQuery a bit differently, and often creates issues for developers who are not award of the quirks. You have to make sure that your script is loaded properly. There are quite a few articles on this issue, such as How to Properly Add JQuery Scripts to WordPress.

1 Like

@James_Hibbard ya when possible I do upload but as this is wordpress I need to create a new installation online so let me see if possible will definitely try to create a short demo online

You shouldn’t have to install WP to upload a demo. Just view source and copy the relevant code.

Hi
Just to let everyone know > the issue was fixed. Basically the form was using AJAX enabled by default So in the multi form version when I clicked next it seemed to clash with jquery. I finally managed to find how to disable ajax submission. When I disable AJAX the scrollTop works fine. Not sure why that happens but may be the ajax call may be interfering with jQuery. Thanks a lot for the help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.