How to Make a Back to Top Button without Javascript - BLOGHINT

How to Make a Back to Top Button without Javascript

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.


On a blog or website there is usually a back up button with an up arrow icon. To make it easy, you only need to embed the hashtag link that goes to the top element of the page. Do you need javascript? Not! Javascript is just a sweetener so that when the page is scrolled down the button appears, while when the page is at the top the button doesn't appear.

Add Button To Page


Suppose you have html as shown below
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back to Top</title>
</head>
<body>
<header id="header"><h1>Membuat Tombol Back to Top</h1></header>
<main style="height:1140px">Disini kita akan belajar membuat tombol back to top tanpa javascript!</main>
</body>
</html>
We add a button just above the code </body>like this
<div id="top"><a href="#header">TOP</a></div>
#header is the id of <header>, because #header is the top id the button will redirect the page to the top, the final view is like this
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back to Top</title>
</head>
<body>
<header id="header"><h1>Membuat Tombol Back to Top</h1></header>
<main style="height:1140px">Disini kita akan belajar membuat tombol back to top tanpa javascript!</main>
<div id="top"><a href="#header">TOP</a></div>
</body>
</html>

Add CSS Code

The button was working properly but the button will appear at the bottom of the page, so that the button remains visible we need to add css. Place the following css in the head.
<style>
#top a {
padding: 1rem;
background-color: red;
color: black;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>
The css makes the button hover and occupies a corner from the bottom right and changes the width and color of the button. The final result is as follows.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back to Top</title>
<style>
#top a {
padding: 1rem;
background-color: red;
color: black;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>
</head>
<body>
<header id="header"><h1>Membuat Tombol Back to Top</h1></header>
<main "height:1140px">Disini kita akan belajar membuat tombol back to top tanpa javascript!</main>
<div id="top"><a href="#header">TOP</a></div>
</body>
</html>

Add a CSS scroll-behavior

Buttons will function but don't scroll or scroll and instead go straight to the top. So that the page scrolls smoothly, you can add the following css code
html {
scroll-behavior: smooth;}
the end result is like this
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back to Top</title>
<style>
html {
scroll-behavior: smooth;}
#top a {
padding: 1rem;
background-color: red;
color: black;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>
</head>
<body>
<header id="header"><h1>Membuat Tombol Back to Top</h1></header>
<main style="height:1140px">Disini kita akan belajar membuat tombol back to top tanpa javascript!</main>
<div id="top"><a href="#header">TOP</a></div>
</body>
</html>
The result is that when the button is clicked, the page will scroll up slowly.

Change buttons and colors

In order to make it look better, we can change the button with the icon from bootstrap
<div id="top"><a href="#header">
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-up-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
</svg>
</a></div>
and change the color in css
#top a {
padding: 1rem;
color: #007bff;
position: fixed;
right: 1rem;
bottom: 1rem;
}
#top a:hover {
color: #085eb9;
}
we remove the background because the icon already has a background and add a hover so that when the button is hit by the cursor it will change color, the final result.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol Back to Top</title>
<style>
html {
scroll-behavior: smooth;}
#top a {
padding: 1rem;
color: #007bff;
position: fixed;
right: 1rem;
bottom: 1rem;
}
#top a:hover {
color: #085eb9;
}
</style>
</head>
<body>
<header id="header"><h1>Membuat Tombol Back to Top</h1></header>
<main style="height:1140px">Disini kita akan belajar membuat tombol back to top tanpa javascript!</main>
<div id="top"><a href="#header">
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-up-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
</svg>
</a></div>
</body>
</html>

0 Response to "How to Make a Back to Top Button without Javascript"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel