Whilst there are plenty of options if you want to put a back to top button on your website, many of them use external SVG or other type image files for the marker image.
You can add a responsive translucent Back To Top button which becomes just visible as site visitor starts scrolling down the page easily with a few lines and just a button element with a Font Awesome icon.
While I used a Bootstrap container in this example, it works fine on standard html pages as well. Also useful for mobile apps if the framework you are using doesn't have one.
Start with the html page, just a standard page including the Font Awesome CDN link, and links to your app or main js and style css files.
1. HTML Page code starts like this.
<doctype html="">
<html lang="en">
<head>
<title>Back To Top Translucent Button</title>
<!--Bootstrap just for aesthetics-->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" rel="stylesheet"></link>
<!-- Font Awesome for the button icon-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<!--style for the button-->
<link href="css/style.css" rel="stylesheet"></link>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">
Floating translucent back to top arrow for long or short pages using standard js & Font Awesome
</h3>
<div class="blockquote">
Page content, put it in here or a lot of lorem ipsum to test it out.
</div>
</div>
</div>
<!--Add Button and FA icon with id topBtn-->
<button id="topBtn" onclick="topFunction()" title="Go to top"><em class="fa fa-2x fa-chevron-up"></em></button>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
Button has an onclick topFunction and a FA icon which can be changed and resized.
2. Add the css to style the button in your linked stylesheet file
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background-color:transparent;
/*Optional color the button
color:rgba(128, 128, 128, .7);*/
}
#topBtn:hover {
background-color:#transparent;
}
The button is fixed to the bottom right of page with transparent background, this will show a solid button icon image which you can make translucent by optionally using the included rgbs settings with the last value say somewhere between .4 to .7.
3. Add javascript functions for the scrolling and clicking actions in your linked js file.
window.onscroll = function() {scrollFunction()};
function scrollFunction(){
/*Change timer to suit page size*/
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
document.querySelector("#topBtn").style.display = "block";
} else {
document.querySelector("#topBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
The timer can be adjusted according to page content size and set for the button to start appearing as the user gets further down the page.
Button appears unobtrusively at bottom right . It doesn't actually need bootstrap css or js, nor jQuery to work fine.
Clone the code example at https://github.com/minimallinux/backtotopbutton.git
A nice easy to implement back to top button.
Labels: CSS, HTML, Javascript, Mobile