Force Browser to Reload Cache From the Website

After updating a website, visitors see it as broken because their browser continues to reference the older JavaScript, JQuery and CSS files.

How to force the browsers of website visitors to make use of the newer updated support files?

Testing a website yourself its possible to refresh the browsers cache.

But for the visitor to your website this approach isn’t possible. What’s needed is for the website to tell the browser to forget the files which it has previously cached.

If its one or two files in the header or footer its possible to add an extension. But this is good for a one-off change, or at the end of a series of work, perhaps a major site update.

For example

<script type=’text/javascript’src’/jquery.js?ver=1.9.3’></script>

Note the added version number.

Changing the version number will cause the browser to get the revised file.

I’ve used this technique on images before where the image amendment, a rotation wasn’t being shown. On this occasion I added a parameter based on the edit time and date of the image.

For a website, such as WordPress, it may not be so easy to modify a file like this. If we have a child thime in use, is it worth copying the header file just to make this change?

Apache .htaccess file

For this method we’ll make use of mod_expires.

In the htaccess file make use of modexpires add the following to your .htaccess file located in the root of your website files.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 60 seconds"
ExpiresByType text/html "access plus 60 seconds"
ExpiresByType image/x-icon "access plus 60 seconds"
ExpiresByType image/gif "access plus 60 seconds"
ExpiresByType image/jpeg "access plus 60 seconds"
ExpiresByType image/png "access plus 60 seconds"
ExpiresByType text/css "access plus 60 seconds"
ExpiresByType text/javascript "access plus 60 seconds"
ExpiresByType application/x-javascript "access plus 60 seconds"
</IfModule>

Include as many entries as you deem necessary, and change the time out as appropriate. I used the above rather short value so my client’s browser would reload the files, having been used heavily viewing recent changes.

The time option is given as a number plus the type, which can be:

  • seconds
  • minutes
  • hours
  • days
  • weeks
  • months
  • years

Page Header Meta Entries

Also there are entries for the top of the page header.

These can be added to the <head> section of the website file.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

For a WordPress website I added them via the functions.php file. I didn’t want to go modifying the header.php file of the theme. The child theme didn’t have a copy, so why add one purely for this and also the theme had a header builder.

function vntweb_header_metadata() {
// Post object if needed
// global $post;
// Page conditional if needed
// if( is_page() ){}
?>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<?php
}
add_action( 'wp_head', 'vntweb_header_metadata' );

One advantage with the use of the functions.php file is that a date test could be added. After, for example a week the addition of the meta entries could be removed.

It’s also possible to create a functions.php file to be added to each website development ,with a number of functions, enabling those which are required on a given website.

Other Options

Another approach is to use regular expressions to amend files. But this may presuppose that extensions do already exist. also looking for a simple modificatin, which isn’t prone to misinterpretatin. can be easily copied and used without the risk of doing damage I prefer the two solutions given above.

References

Inmotion hosting – apache mod expires

Stackoverflow – control web page caching

Mozilla – headers cache cotnrol

Differences Between Form Methods Post and Get

HTML forms may post or get their submission.

The method attribute, either post or get, prescribes to the browser how the form data is to be sent back to the server.

For reference here’s a typical form declaration, on an HTML page

<form action=”contact.php” method=”get”>

As shown there is the form tag together with the action and the destination handler. And our point of interest the method. As shown here its set to get.

So what’s the difference between the two methods of form submission?

Does it matter which I choose?

Post

The completed form field entries are sent within the body of the http request.

This allows the collected form entry data to be whatever size. Ideal if there’s a lot of data collection involving free form content areas.

However, because there is no change to the URL from the field entries, there isn’t the page variations to bookmark.

Refreshing the browser page after a submission will cause an alert asking whether the user wishes the data to be re-submitted. Server form handling protection against duplicate form submission should be considered.

Allows the submission of binary data, for example the uploading of images.

With this approach the completed field entries are retained on the page, making it secure.

If you are changing content, for example your user profile, password or address, then the post method is the one to use.

Get

This is the default form method. Without specifying the form method in the form tag it will be assumed to be of method type get.

With the get method the form data is more visible.

The fields and their values are passed in the URL as name+value querystring parameters. For example

www.example.com/index.php?typ=fruit&cat=6

With the form data in the URL the page can be bookmarked. Similarly as the parameters have been sent within the URL they are also a part of the browser history.

Beware there’s a restriction on the length of the address URL. The available length is only 3000 characters, including your domain name and the page structure to the page on which is your form. Too long and the parameters may be lost as the URL is truncated.

Consider whether shortening the form labels will suffice, or structuring your answers too will keep within the restriction. Have you simply too many fields on your form? Then it ought to be the post method.

Because the get approach puts the form values in the address it is deemed to be insecure. Definitely not the method to be used for username and password submission.

Refreshing the browser the request will be executed once again, but the entries won’t be re-submitted to the server where the browser has cached them.

If the form is used to view data, perhaps an online catelogue of products, then the get method is appropriate. The pages can be bookmarked and saved for later. Search engine indexing will be for the individual products and categories.

References

W3 Schools – att form method

W3 Schools – http methods

Mozilla – sending and receiving data

Wikipedia – POST HTTP

Comparison of Font Sizes

I wanted a comparison between the different pixel and point sizes.

I’ve listed the increasing numerical size for each series side-by-side, illustrating how points get progressively larger.

In the table below I’ve set the style in the pixel and point columns such that it’ll over-ride the CSS configured elsewhere.

 Pixel (px)Point (pt)
7Distaghil SarPakistan
8HimalchuliNepal
9Gasherbrum IVPakistan
10Annapurna IINepal
11Gasherbrum IIIPakistan – China
12Gyachung KangNepal – China
13ShishapangmaChina
14Gasherbrum IIPakistan – China
15Broad PeakPakistan – China
16Gasherbrum IPakistan – China
17Annapurna INepal
18Nanga ParbatPakistan
19ManasluNepal
20Dhaulagiri INepal
21Cho OyuNepal – China
22MakaluNepal – China
23LhotseNepal – China
24KangchenjungaNepal – India
25K2Pakistan – China
26Mount EverestNepal – China

The simple table looked boring and uninviting with just the two initial columns: one for pixel and one for point sizes. So I’ve replaced these by columns with the highest mountains and their countries, as derived Wikipedia.

HTML Frames

Here’s some old thoughts about the use of frames in HTML

I found some notes about HTML frames written some time ago.

Once upon a time long ago… frames were used regularly on websites.

Using frames we are able to divide web page into two or more areas. This can be by fixed width of percentage.

One of the main reasons for the use of frames was to provide distinct content within different areas of the page. Frames enable the website’s navigation to be shown

Often the navigation was positioned on the left of the page with the content on the right. When one of the navigation links was clicked only the content area changed.

To create our HTML page using frames we need a master page, typically index.html which will look something like:

<frameset>
<frame src="Nav_page.html">
<frame src="content_page.html">
</frameset>

In the example above the defined widths of the two frame areas are one of 150 pixels and the othereverything else.

The two other web pages referenced are created in the usual way.

Attributes of the FRAME tag are:

AttributeValuesDescription
frameborder1 or 0Determines whether frames are displayed with a border.
marginwidthAn integer valueThe height of the left and right margins in pixels.
marginheightAn integer valueThe width of the top and bottom margins in pixels.
nameA string beginning with a letterIdentifies the frame. This is relevant for JavaScript to be able to reference the frame.
noresizeWhen set it prevents the user from resizing the frame.
scrollingyes, no, autoSpecifies whether scroll bars shall be displayed. When Auto is specified the scrollbar is added if required.
srcany URLSpecifies the file to be displayed in the frame. If no file is given the frame will be left blank.

The frames approach has historically been a problem for search engines to index. Also if the visitor arrives on a content page a means of viewing the complete arrangement of navigation and content must be supplied.

Often frames will be flagged as a potential security issue. The content of a frame may be a different website and can therefore be changed to a website other than the one intended.

And today what about the use of frames today?

Frames are not supported in HTML5.

Adapting Menu for Touch

Before the proliferation of touch devices website menus were controlled with mouse hovers and clicks.

To view the child items associated with a particular menu item, simply hover over the item to pop up the child menu with the list of child items.

If you wanted to view the parent page, a simple click was all that was required.

Adapting menu for touch: child menu

But hovering doesn’t work with touch devices. Touching on the parent page in the menu navigates to the page, not showing the child menu.

To facilitate child menus on touch enabled devices clicking on the parent should not open that page, but rather show the list of child items.

To modify the traditional menu for touch devices the parent menu items are disabled.

If the parent page isn’t accessible how to view it?

Adapting menu for touch: child menu incorporating parent

If you need to implement the parent page move it, possibly with a variation in name into the child list. For example, the Veg page could be moved as a child below with the renamed parent Vegetables.

The parent page in the menu is there solely for structure it’s no longer a physical viewable page.

Creating Content Border with Images

Website content blocks, often called modules, or widgets, can be surrounded by borders to make them stand out. Perhaps notepad paper or an old parchment.

Different surrounds and backgrounds can be used to make the content pleasing to the eye and to add distinction. The styling enables the content to be categorised either by content or importance.

CSS3 allows for the replacement of some of the older work, for example borders with radius corners and drop shadows.

However, to implement graphic design surrounds, an image is still chopped into segments, as previously.

Where possible the segments are created such that either a horizontal or vertical repeat can be implemented.

Care is taken to ensure that frilly or castellated edges are seen to blend smoothly, not with a jagged edge, step, or hard change of colour.

A repeat allows for an efficient use of downloaded images, keeping the weight of the web page downloaded to a minimum and allowing for expansion of the content area according to the content added.

The two methods generally employed to provide this border styling are tables and divs.

In both methods the image design is chopped up into segments which are either corners or repeats for the sides. There may also be background styling for the content within the block.

The smallest table is based upon a 3×3 grid. Whilst the div method uses a number of divs stacked one above the other.

Borders Using Tables

An example of the table layout is given below. It uses a combination of fixed size table cells.

<table>
<tr>
<td width="6" height="6" background="/images/topleft.gif"> </td>
<td width="100%" height="6" background="/images/top.gif" height="6"> </td>
<td width="6" height="6" background="/images/topright.gif"> </td>
</tr>
<tr>
<td width="6" height="100%"><img src="/images/left.gif" width="6"> </td>
<td width="100%" height="100%" >Content is added here</td>
<td width="6" height="100%"><img src="/images/right.gif" width="6"> </td>
</tr>
<tr>
<td width="6" height="6" background="/images/bottomleft.gif"> </td>
<td width="100%" height="6"><img src="/images/bottom.gif"  height="6"> </td>
<td width="6" height="6" background="/images/bottomright.gif"> </td>
</tr>
</table>

Here’s an image showing a container with blue and white edges, with a yellow background for the content

Creating ontent border with images: grid of images

Perhaps a little small to view properly, so here it is enlarged:

Creating content border with images: grid of images (enlarged)

As can be seen the corners are of a fixed size. The sides joining them are set to be the full length of that side. As shown the edge middle sections are 6px in length. To minimise the saved image this could be 1px.

The side and top/bottom images are set to to match the width (6px) or height (6px). These images will then be repeated within the table cell.

The table cell in the centre is the content area. Within this area will be added the appropriate code for the CMS to generate the content.

I have found that to ensure the desired results the images added along the top and sides should be specified fully, to avoid the browser making guesses as to your intent.

The table code above can be improved upon by adding CSS class references and moving the image and sizing to CSS.

For example here’s a 3×3 table with the HTML layout and associated CSS.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="BlueBorder-tl"></td>
<td class="BlueBorder-tc"></td>
<td class="BlueBorder-tr"></td>
</tr>
<tr>
<td class="BlueBorder-cl"></td>
<td class="BlueBorder-cc">
Content goes here
</td>
<td class="BlueBorder-cr"></td>
</tr>
<td class="BlueBorder-bl"></td>
<td class="BlueBorder-bc"></td>
<td class="BlueBorder-br"></td>
</tr>
</tbody>
</table>

In the CSS below, I have merged the corner images together as a single image. This is then positioned to show the desired corner.

/* begin Box, BlueBorder */


.BlueBorder-tl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
}

.BlueBorder-tr
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px 0px;
}

.BlueBorder-bl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: 0px -6px;
}

.BlueBorder-br
{
	width: 6px;
	height: 6px;
	background: url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px -6px;
}

.BlueBorder-t
{
	height: 6px;
	background: url('images/BlueBorder-t.png') repeat-x;
}

.BlueBorder-l
{
	height: 6px;
	background: url('images/BlueBorder-l.png') repeat-x;
}

.BlueBorder-r
{
	height: 6px;
	background: url('images/BlueBorder-r.png') repeat-x;
}

.BlueBorder-b
{
	height: 6px;
	background: url('images/BlueBorder-b.png') repeat-x;
}

/* end Box, BlueBorder */

Borders Using DIVs

The div method uses a number of divs either stacked on top of each other or absolutely positioned to give the same effect.

<div class="topLeft">
 <div class="topRight">
  <div class="top">
   <div class="left">
    <div class="right">
     Content is added here
    </div>
   </div>
  </div>
 </div>
</div>

Like the use of tables the original image is chopped up into segments which are then put back together.

In the div method all the items are of the same size the background images are moved to their appropriate edge and the repeat set for the x or y direction accordingly.

For example the top left corner is set using:

.topLeft{
background:url(/images/topleft.gif) no-repeat
}

I have found using this method that there is a need to stack the DIVs in a correct order to ensure that the edges and overlaps of the backgrounds match up and can be viewed correctly.

I have also used a method whereby each div is referenced sequentially with the use of absolute positioning moving the div to its required location.

Creating content border with images using divs

The image above shows an example of the result. In this case I have used a fixed width for the div sizing. It would be normal to allow 100% sizing, the div taking the full width of its bounding container.

Again the DIVs are stacked, but in many respects the code looks simpler to view and there is less chance of omitting one of the closing tags </div>.

Note how the edges are constructed first, allowing the corners to sit on top hiding the continuous edges.

<div class="border">
 <div class="top">
 <div class="left">
 <div class="right">
 <div class="bottom">
  <div class="topLeft">
  <div class="topRight">
  <div class="bottomLeft">
  <div class="bottomRight"> 
   <div class="content">Content is shown here </div>
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

And the associated CSS to position the above elements:

 .border{ position:relative; }
 .top{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-t.png) repeat-x;
 background-position:0 0;
 }
 .left{ position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-l.png) repeat-y;
 background-position:0 0;
 }
 .right{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-r.png) repeat-y;
 background-position:100% 0;
 }
 .bottom{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-b.png) repeat-x;
 background-position:0 100%;
 }
 .topLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tl.png) no-repeat;
 background-position:0 0;
 }
 .topRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tr.png) no-repeat;
 background-position:100% 0;
 }
 .bottomLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-bl.png) no-repeat;
 background-position:0 100%;
 }
 .bottomRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-br.png) no-repeat;
 background-position:100% 100%;
 }
 .content{padding:8px;}

Thoughts

I have found using a 3×3 table with border edges and a central content area was most successful.

The use of stacked DIVs with positioned images and the use of relative and absolute positioning didn’t always work, for example as a DotNetNuke container. The JavaScript associated with the container elements couldn’t derive the position and tended to then misplace the required action menu.

For efficiency there is an advantage to creating a single image comprising the components to be used. Only the single image is then downloaded which saves on the overhead employed in asking for each image download, checking it’s version.

The single image is then positioned as required. This is like taking a larger image and moving it behind a window cutout to show the desired section.

As shown in the examples above the border images are quite simple. The container themes below are more akin to this style of table and div layouts.

creating content border with images examples

Add Scroll Top Image

When the web page has scrolled down an offset distance show a scroll to top image.

When redesigning the VNTweb website, thinking about the longer article pages, I chose to add one of these.

Scrolling the page down shows on image in a fixed location. Clicking on this image shall scroll the page back to the top of the page, or a named div.

I wanted my scrolltop image to appear once the page had scrolled down by a measure.

Here’s what I used

 
$VNTweb(window).scroll(function(){ 
  if ($VNTweb(this).scrollTop() > 100) { 
    $VNTweb('#scroll').fadeIn(); 
  } else { 
    $VNTweb('#scroll').fadeOut(); 
  } 
});

Once the page has scrolled down by 100 pixels then the scroll image becomes visible.

And for the image onClick scroll action I used the scroll from my article JQuery Page Scroll on Load, a few weeks ago.

$VNTweb('#scroll-top').click(function(){ 
  $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
  return false; 
}); 

You may wish to experiment with the distance scrolled before showing the image. Perhaps 100 pixels is too soon.

Another idea would be to hide and show the image at different values.

For example show the scroll to top image when the page has scrolled down a distance of 400 pixels, but hide once more when the distance reaches 300.

If you are looking for suitable images take a look at Font Awesome or Glyphicons.

Using Microformats to Indicate Address

If you run one of the online website analysis websites on your website it may indicate the use of microformats.

So what are they?

Microformats can be used to indicate the address. For example, of the contact us page of a website the address details can be enclosed.

Rather than simply putting the address in place, perhaps wrapped in paragraph tags, something like.

<p>
My Company Ltd.<br />
Apple Tree Road<br />
Reading<br />
Berkshire<br />
England<br />
RG1 1AA<br />
Tel. 0118 496 0000
</p>

The idea is to indicate to search engines the nature of the elements highlighting how the address is composed, region, city, etc.

This is all about adding clarity to the search engines and ensuring that your intent is understood clearly and correctly.

With microformats the ambiguity with regards to addresses and whether a word is a part of the address an be resolved.

For example my local town of Reading. So difficult when searching for related topics as the word doubles as in “reading a book”. There’s also a village in Somerset called Street. Putting the town name, for example Reading, on the page wrapped with microformats ensures clarity.

Here’s a typical address, with company name, address, postcode, country and telephone details.

My Company Ltd.
Apple Tree Road
Reading
Berkshire
England
RG1 1AA
Tel: 0118 496 0000
Fax: 0118 496 0001
Email: info@example.com
Open: 9am to 5pm

And here’s the micro formatting of the address.

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">My company Ltd.</span>
  Contact Details:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Main address:
    <span itemprop="streetAddress">Apple Tree Road</span>
    <span itemprop="postalCode">RG1 1AA</span>
    <span itemprop="addressLocality">Reading</span>,
  </div>
  Tel:<span itemprop="telephone">0118 496 0000</span>,
  Fax:<span itemprop="faxNumber">0118 496 0001</span>,
  Email: <span itemprop="email">info@example.com</span>

The Schema website provides the following list of PostalAddress properties:

PropertyDescription
addressCountryThis may be either the country name of the two letter code
addressLocalityThe local region – often a district of a city
addressRegionThe wider region – county administration, for example
postOfficeBoxNumberA PO Box number
PostalcodeThe Associated postcode
streetAddressThe street address may be a simple building number and road, but can include building name and more than one row

Also to be considered are the ContactPoint properties which cover the telephone and email address

PropertyDescription
areaServedUseful if you have offices providing different geographic coverage
availableLanguage Languages supported, the two letter codes are used in this instance.
contactOption Used to indicate further contact options: a free telephone number or support for hearing-impaired.
contactType Used to specify the business contact area: sales, support.
email Email address
faxNumber Fax number
hoursAvailable The opening hours whilst the contact is available.
productSupported If the organisation wishes to highlight that these support details are for a particular product line or area.
telephone A Telephone number

Looking at the table above it can be seen that the opening hours for the organisation can be wrapped to highlight the timing.

There’s a lot of different properties on the Schema website. Spend some time looking around to find the best match between the type of businesses and the information which you wish to convey.

References

I wanted to use contact details, telephone and email which weren’t genuine or likely to be. In the references I’ve included a link to Ofcom’s numbers for drama. A list of numbers which won’t be assigned, much like the use of example.com for domains and email addresses in documentation.

Schema address

Microformats.org

Ofcom: Numbers for drama

Bootstrap3 Removing Parent Menu onClick

Using the Bootstrap menu clicking on a parent menu item reveals the child items. The parent page isn’t opened in the traditional menu way.

This is by design.

In summary, clicking on the parent menu item shows child menu items as drop down
Hovering over the parent page has no effect.

The result which I wanted was:

Hover over parent menu item to show child menu items in a drop down
Click on parent to change page, showing parent page.

The onclick of the parent menu item causes a drop down to appear and not to move forward to view the parent item

Changes to be made

  • onclick to open parent item
  • hover to show dropdown

To implement the changes I removed the data-toggle attribute and added a hover function emulating the click action but adding the open class.

I added the following to the header.php file of the WordPress child theme.

<script type="text/javascript">
var $vntweb =jQuery.noConflict();
$vntweb(document).ready(function ($vntweb) {
	$vntweb('a').removeAttr( 'data-toggle');
	$vntweb('.dropdown').hover(function() {
	     $vntweb(this).toggleClass('open');
	});
});
</script>

A better place to add this would be an included JavaScript file.

I like to add my own variable $vntweb with a noConflict, rather than simply the use of $. Usually this keeps me out of trouble, avoiding conflicts with other uses of $ as a variable

jQuery Scroll to Page Top

For a long web page it can be nice for your visitor to click on an icon and for the page to scroll back to the top.

None of that frantic skipping of the fingers on a small phone screen!

For a web page with lots of content, it may be helpful to your visitors to add a scroll to page top text and/or icon.

This can be implemented using jQuery.

An icon placed at the bottom of the page content, or the end of sections of text, can action a return to page top by calling a simple piece of jQuery.

For a recent project I chose to use one of the glyphicons as my up arrow at the bottom the page.

Here’s the arrow icon in the footer of the page

<a href=”javascript:void(0);” id=”scroll-top” title=”Scroll to Top” style=”display: none;”>
<span class=”glyphicon glyphicon-circle-arrow-up”></span>
</a>

As an addition to this you may wish to keep the icon hidden, showing it only when the page view reaches the bottom.

As can be seen in the above example its hidden initially.

And here’s the jQuery scroll top

$VNTweb(window).scroll(function(){ 
    if ($VNTweb(this).scrollTop() > 100) { 
        $VNTweb('#scroll-top').fadeIn(); 
    } else { 
        $VNTweb('#scroll-top').fadeOut(); 
    }     
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
        frontpagetile();
    }
}); 
$VNTweb('#scroll-top').click(function(){ 
    $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
}); 

To avoid conflict I use $VNTweb in my jQuery, declared using:

var $VNTweb = jQuery.noConflict();

As the screen nears the target area the scroll to icon fades into view.

I had looked through the arrow icons available in font awesome but didn’t find what I wanted to use on this occasion. I chose to use one from Glyphicons. I added a reference to the set in the top of the CSS file:

@font-face {font-family: glyphicons;src: url('../fonts/glyphicons-halflings-regular.otf') format('truetype'),url('../fonts/glyphicons-halflings-regular.eot') format('eot'),url('../fonts/glyphicons-halflings-regular.woff') format('woff');}

My CSS for positioning the arrow:

#scroll-top {position:fixed;right:20px;bottom:40px;display:block;z-index:999999;}
#scroll-top span {font-size:48px;color:#fa00ff;text-shadow: 0px 0px 1px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
#scroll-top span:hover {color:#ffc300;text-shadow: 0px 0px 6px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}

As can be seen I also have a transition to take the suddenness out of its appearance/disappearance.

A jQuery scroll to top, which appears in a fixed place, bottom corner, as the page scrolls down. Clicking on the arrow link smoothly scrolls the page back to the top of the page, avoiding lots of mouse or finger movement on the screen.