26 Votes

jQuery: Scroll up and down with and without JavaScript

Tip by Stefan Trost | 2012-07-13 at 22:22

In two other tips, I have already shown how you can smoothly scroll up and down on your web page with the help of JavaScript and jQuery. The problem with this solution was, that it only works if the user has JavaScript enabled in his browser.

In this tip, I want to show you another solution, which is also performing a nice animated scrolling with JavaScript, but does not fail if JavaScript is disabled. Whenever JavaScript is not active, it is normally jumped up or down.


To implement our example, we will first program a pure HTML solution that is working without JavaScript:

<!-- top most of the page -->
<a name="top"></a>
<!-- links somewhere on the page -->
<a href="#top">To Top</a>
<a href="#bottom">To Bottom</a>
<!-- at the very bottom of the page -->
<a name="bottom"></a>

First, we mark the top and the bottom of our page with our anchor links ("a name"). These are the places, it is jumped to whenever we are scrolling to the top or to the bottom. In the center, we can can see two links, the visitor can use to perform the action. These links can be anywhere positioned within the page and you can also include more than one to-the-top-links or to-the-bottom-links.

This HTML ensures that we can jump to the bottom and to the top of the page already and only with the links. What is missing is the animation. In exchange, this also works with JavaScript turned off.


Now we come to our jQuery part. In the other two tips, I have already described the operation, here we only adjust it for our links:

$(document).ready(function() {
  // scroll to top
    $("html, body").animate({scrollTop:0}, 800);
    return false;
  // scroll to bottom
    $("html, body").animate({scrollTop:$(document).height()}, 800);
    return false;

The selectors "a[href=#top]" and "a[href=#bottom]" select our above described anchor links and assign this with our smooth scroll function.

For the case, that the user has disabled JavaScript, this code is will not be executed and it remains at the normal jumping with HTML anchors. If the user has JavaScript enabled, however, the page scrolls softly and smoothly.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Google Tips

Tip | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.