Skip to content


These scripts are more complex or use advanced features.


This script enables functionality for a button to scroll the webpage back to the top as used on this website.

This script needs a "button" to be built in the webpage, which is normally hidden by CSS. An example would be an HTML button:

<button onclick="topFunction()" id="returnToTop" title="Go to top" style="display:none;position:fixed;bottom:12px;right:12px;z-index:99;border:none;outline:none;background-color:red;color:white;cursor:pointer;padding:10px;border-radius:10px;font-size:18px;">Top</button>
window.onscroll = function () {

function scrollFunction() {
    if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) {
        document.getElementById( "returnToTop" ).style.display = "block";
    } else {
        document.getElementById( "returnToTop" ).style.display = "none";

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera


This script allows for the creation of the "Copy text" buttons used on this website.

This script will copy the text contained inside the first <pre> tag that is inside the button's parent's parent. Whew! Here is the structure of HTML:

  <h1>Header Text <button>Button Text</button></h1>
  <pre>Text to be copied</pre>
  <pre>Text that will be ignored</pre>
  <pre>Text that will be ignored</pre>

This script also needs a "button" to be built in the webpage. An example would be an HTML button:

<button onclick="setClipboardText(this)" style="margin-left:5em;font-size:50%;vertical-align:middle;color:black;border:none;border-radius:.5em;padding:.33em;">Copy text</button>
function setClipboardText(obj) {
  // Based on a script posted on by Yogesh Singh

  var preColl = obj.parentNode.parentNode.getElementsByTagName("pre");
  var text = preColl[Object.keys(preColl)[0]].innerHTML;
  //alert( "here: " + text );
  var id = "mycustom-clipboard-textarea-hidden-id";
  var existsTextarea = document.getElementById(id);

  if (!existsTextarea) {
    console.log("Creating textarea");
    var textarea = document.createElement("textarea"); = id;
    // Place in top-left corner of screen regardless of scroll position. = 'fixed'; = 0; = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers. = '1px'; = '1px';

    // We don't need padding, reducing the size if it does flash render. = 0;

    // Clean up any borders. = 'none'; = 'none'; = 'none';

    // Avoid flash of white box if rendered for any reason. = 'transparent';
    console.log("The textarea now exists :)");
    existsTextarea = document.getElementById(id);
  } else {
    console.log("The textarea already exists :3")

  existsTextarea.value = text;;

  try {
    var status = document.execCommand('copy');
    if (!status) {
      console.error("Cannot copy text");
    } else {
      console.log("The text is now on the clipboard");
      obj.innerHTML = "Copied!";
      setTimeout(function() { resetButtonText(obj) }, 5000);
  } catch (err) {
    console.log('Unable to copy.');

function resetButtonText(obj) {
  obj.innerHTML = "Copy text";
Back to top