jQuery: Scroll up and down with and without JavaScript

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.

HTML

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.

JavaScript

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
  $("a[href=#top]").click(function(){
    $("html, body").animate({scrollTop:0}, 800);
    return false;
  });
  
  // scroll to bottom
  $("a[href=#bottom]").click(function(){
    $("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.