A simple implementation of the scroll to top/bottom of the page when you double click on the upper/lower part of the page. That is one of my favourite features of The New Basecamp. I keep catching myself using it even without a reason!

Demo for the impatient

Want to see this in action? Try it right now on this website! Make sure you are clicking on the right areas illustrated on the screenshot below.

The idea

Very often you can find an empty space outside the main content block of websites. Content is the most important part of any website. And even though, most of the websites doesn't use a full browser's window width for content. Often there are empty unused gaps on each side of the main content area. And those gaps are especially big on bigger screen sizes.

Why don't use those areas to implement some extra functionality? Here is a screenshot of my blog post with illustrated areas that we are going to use to scroll to the top/bottom of the page.

Illustration of the areas on a screenshot of this website
Illustration of the areas on a screenshot of this website

Ideally, double click on the two highlighted areas at the top should nicely scroll the page to the top. And the same for the bottom areas - double click on those should scroll the page to the bottom.

Jump into the code

First of all, let's determine the clicked area. It should not scroll the page if user clicks on the main content area. Here is a simple function that returns true if a given element is one of the allowed elements to fire the scrolling.

function check_el(e) {
    return $(e).is('body, .page-content');
}

Replace body, .page-content with the selectors from your HTML markup. Double click on those elements will trigger the scrolling.

Time to implement the scrolling. First of all, we need to specify the double click event:

$('html').on({
    dblclick: function(e) {
        // scrolling implementation goes here
    }
});

Next, inside the dblclick event function we need to check if user double clicked on the element outside the main content:

if (check_el(e.target)) {
    // scrolling implementation
}

After that, let's calcutate the vertical position of the cursor where they double clicked (in percentage). And then scroll to the top if they clicked on the area between 0% and 33% of the window height and to the bottom if between 66% and 100%.

y = parseInt(e.clientY / window.innerHeight * 100, 10);
if (y < 33) return $('html, body').animate({ scrollTop: 0 }, 300);
if (y > 66) return $('html, body').animate({ scrollTop: $('html').height() }, 300);

If you run this code, you might find that double clicking (even outside the main content) is selecting some pieces of content. There is a very simple fix for this - need to prevent the default behaviour of the click outside the main content block:

$('html').on({
    mousedown: function(e) {
        if (check_el(e.target)) return e.preventDefault();
    }
});

All the code together

function check_el(e) {
    return $(e).is('body, .page-content');
}
$('html').on({
    mousedown: function(e) {
        if (check_el(e.target)) return e.preventDefault();
    },
    dblclick: function(e) {
        var y;
        if (check_el(e.target)) {
            y = parseInt(e.clientY / window.innerHeight * 100, 10);
            if (y < 33) return $('html, body').animate({ scrollTop: 0 }, 300);
            if (y > 66) return $('html, body').animate({ scrollTop: $('html').height() }, 300);
        }
    }
});

Conclusion

In just a few lines of JavaScript/jQuery code you can add a nice scrolling functionality to your website. That is definitely not a huge improvement to a website, but the overal impression is made up of small features like this. Here are some pros and cons I can think about:

Pros:

  • Easy implementation
  • No need of extra markup, scripts, styles or images
  • Can replace the absolutely positioned "To the top" button that we used to use for this purpose

Cons:

  • This function is hidden - need to inform users so they can use it
  • Not very useful on mobile devices because the areas on the sides are very narrow