JavaScript Floating Button

February 25, 2021

Fixed floating action button using JavaScript, the button will appear at bottom right-hand corner of the webpage. Checkout, the below JavaScript code for reference. Create a new .js file and include the below code and call it using <script/> tag. 

const getBodyElement = document.body;
if (getBodyElement !== null ) {
  let parentNode = document.createElement("div");
  parentNode.style =
    "position: fixed; right: 23px; bottom: 23px; padding: 6px 10px; background-color: #34568B; border-radius: 4px; z-index: 997";

  let childNode = document.createElement("a");
  childNode.href =
    document.location.hostname !== ""
      ? document.location.protocol + "//" + document.location.hostname
      : "#";
  childNode.style =
    "cursor: pointer; font-size: 13px; text-decoration: none; color: #FFFFFF; font-family: sans-serif; z-index: 1;";
  let childNodeText = document.createTextNode("Return to Home Page");
  childNode.appendChild(childNodeText);

  parentNode.appendChild(childNode);
  getBodyElement.appendChild(parentNode);
}