Back to Top Scroll Button using
HTML CSS and JavaScript
here we are creating back to top scroll button using HTML CSS and pure JavaScript with simple lines of code.
with smooth behaviour.
Like this :
Watch detailed video :
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>top btn</title>
<script src="https://kit.fontawesome.com/52244c391d.js" crossorigin="anonymous"></script>
<style>
html {
scroll-behavior: smooth;
}
h1 {
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
img {
width: 100%;
}
p {
font-size: 1.7rem;
}
#btn {
position: fixed;
right: 1%;
bottom: 1%;
width: 40px;
height: 40px;
border-radius: 100%;
opacity: 0;
transition: all .5s;
}
#btn:hover {
transform: rotate(360deg);
}
.fas {
font-size: 1rem;
}
</style>
</head>
<body>
<h1>What is data center</h1>
<img src="datacenter.jpg" alt="">
<p>More than three years of planning and construction have gone into the
European DataDock data center. The clear
goal was to meet the highest demands on availability and connectivity.
To this end, all the relevant facilities
were laid out redundantly.
In order to achieve outstanding energy efficiency, the infrastructure
consists exclusively of state-of-the-art
eco-friendly components. In addition, an innovative artesian-well cooling
system ensures optimum energy ratings.
DataDock is located along the main European fiber optic route, resulting
in the fastest possible connection to
Germany, France, the rest of Europe, and indeed the rest of the world!
Carriers via our own European backbone
Deutsche Telekom, Level 3, Telia, Cogent, DE-CIX / ECIX / LINX</p>
<p>Europe: Frankfurt (DE)
Data Center Frankfurt
Just 3 km away from central Frankfurt, Germany’s major financial and
telecommunications district, the Telehouse
Tier 3 data center stretches over a 67,000 m² site.
A highly secure data center, and one of the largest housing facilities
in Germany with reliable environmental
controlling systems and state-of-the art security systems. Connected to
Europe’s second largest Internet
exchange, the DE-CIX.</p>
<p>Our data center in Miami is perfectly located to reach customers on the
US East Coast as well as South and Latin
America. The data center has over 134,000 sqft floor space and is
connected to all major carriers. It benefits
from 24x7 onsite safety personnel, state-of-the art CCTV and biometric
access systems.
The building is structurally designed to withstand Category 5 Hurricanes
and has fully redundant UPS systems,
ensuring that your servers are always in safe hands. </p>
<p>More than three years of planning and construction have gone into the
European DataDock data center. The clear
goal was to meet the highest demands on availability and connectivity.
To this end, all the relevant facilities
were laid out redundantly.
In order to achieve outstanding energy efficiency, the infrastructure
consists exclusively of state-of-the-art
eco-friendly components. In addition, an innovative artesian-well cooling
system ensures optimum energy ratings.
DataDock is located along the main European fiber optic route, resulting
in the fastest possible connection to
Germany, France, the rest of Europe, and indeed the rest of the world!
Carriers via our own European backbone
Deutsche Telekom, Level 3, Telia, Cogent, DE-CIX / ECIX / LINX</p>
<p>Europe: Frankfurt (DE)
Data Center Frankfurt
Just 3 km away from central Frankfurt, Germany’s major financial
and telecommunications district, the Telehouse
Tier 3 data center stretches over a 67,000 m² site.
A highly secure data center, and one of the largest housing
facilities in Germany with reliable environmental
controlling systems and state-of-the art security systems.
Connected to Europe’s second largest Internet
exchange, the DE-CIX.</p>
<p>Our data center in Miami is perfectly located to reach customers
on the US East Coast as well as South and Latin
America. The data center has over 134,000 sqft floor space and is
connected to all major carriers. It benefits
from 24x7 onsite safety personnel, state-of-the art CCTV and biometric access
systems.
The building is structurally designed to withstand Category 5 Hurricanes
and has fully redundant UPS systems,
ensuring that your servers are always in safe hands. </p>
<button id="btn"><i class="fas fa-chevron-up"></i></button>
<script>
let btn = document.getElementById("btn");
window.onscroll = function () {
if (document.body.scrollTop > 300||document.documentElement.scrollTop > 300)
{
btn.style.opacity = 1;
} else {
btn.style.opacity = 0;
}
}
btn.addEventListener("click", onclick)
function onclick() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
</script>
</body>
</html>
used image:
0 Comments