Since the iArtWork theme I’m currently using has a feature where double-clicking the blank area of the page scrolls you back to the top, I’ve gotten so used to double-clicking blank areas after reading articles that I now do it on every blog I visit…

So I thought I’d share this “double-click blank area to scroll to top” feature with everyone. That way, when I visit your blog in the future, I won’t have to break my habit! I hope this WordPress tip proves useful!

Implementing “double-click blank area to scroll to top” is actually quite simple. Just add the following JavaScript code to your theme’s header template:

<script type="text/javascript">
$(function(){
    var scrollTo = function(top, duration, callback) {
        var w = $(window);
        var FPS = 50;
        var currentTop = w.scrollTop();
        var offset = (currentTop - top) / (duration  FPS / 1000);
        var n = 0;
        var prevTop = currentTop;
        var t = setInterval(function() {
            if ((prevTop - top)  (currentTop - top) <= 0) {
                clearInterval(t);
                currentTop = prevTop = top;
                w.scrollTop(top);
                if (callback) callback();
            } else {
                prevTop = currentTop;
                w.scrollTop(currentTop -= offset);
            }
        }, 1000 / FPS);
    }
    $('body').dblclick(function(){
        scrollTo(0, 200, function(){
        });
        $(".textField,#commentForm textarea").focus();
    });
    $('#container.#footer').dblclick(function(e){e.stopPropagation();});
});
</script>

OK, after modifying the theme, you can double-click the blank area (the edges, margins, etc.) to trigger a scroll-to-top effect (this is the behavior on my blog — a quick jump). You can preview the effect right here on this blog.

Here’s an alternative method for a smooth, gradual scroll to top:

< script type = "text / javascript" > // < ![CDATA[
var currentpos, timer;
function initialize() {
    timer = setInterval("scrollwindow()", 10);
}
function sc() {
    clearInterval(timer);
}
function scrollwindow() {
    window.scrollBy(0, 1);
}
document.onmousedown = sc document.ondblclick = initialize
// ]]></script>

Usage is the same as above — just paste it into your header.php file before </head>.
OK, that wraps up the tutorial. If you have any questions, feel free to leave a comment below and I’ll be happy to help!
PS: The “blank area” mentioned in this article refers to the background — for my blog, that means double-clicking the black background area to scroll to top!