Last Updated: May 15, 2019

Hook.js

I came across an interesting concept today, called Hook.js.

It allows you to implement a scroll up refresh, similair to what you find on most tablets and smartphones.

Hook.js implements this functionality quite simply into your website. Just copy the js file to your website and add they styles, as well as a small amount of code to the top of your website, just below the <body> tag.

You will first need to download the files here.

Place the following right before </head>:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

Place the following right after <body>:

<div id="hook">
    <div id="loader">
        <div class="spinner"></div>
    </div>
    <span id="hook-text">Reloading...</span>
</div>

The only thing that I think should be looked at, is the smoothness of the transition of the scroll down refresh, its a little bit abrupt, but overall it is an interesting concept to look into adding to ones website as a nice to have.

#javascript

#jquery

#development