Template:Back to top: Difference between revisions
From Ragnafied Wiki
Replaced content with "<div class="back-to-top-container"> <a href="#">↑ Top</a> </div>" Tag: Replaced |
No edit summary |
||
| Line 1: | Line 1: | ||
<div class="back-to-top-container"> | <div class="back-to-top-container"> | ||
<a href="#">↑ Top</a> | <a href="#" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">↑ Top</a> | ||
</div> | </div> | ||
<style> | |||
.back-to-top-container { | |||
position: fixed; | |||
bottom: 30px; | |||
right: 30px; | |||
z-index: 9999; | |||
} | |||
.back-to-top-container a { | |||
background: linear-gradient(135deg, #FF6A00, #D93800); | |||
color: white; | |||
width: 50px; | |||
height: 50px; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: bold; | |||
font-size: 14px; | |||
text-decoration: none; | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |||
border: 2px solid white; | |||
transition: all 0.3s ease; | |||
cursor: pointer; | |||
} | |||
.back-to-top-container a:hover { | |||
background: linear-gradient(135deg, #FF7A20, #F4B400); | |||
transform: translateY(-5px); | |||
box-shadow: 0 6px 15px rgba(0,0,0,0.4); | |||
color: white; | |||
text-decoration: none; | |||
} | |||
@media (max-width: 768px) { | |||
.back-to-top-container { | |||
bottom: 20px; | |||
right: 20px; | |||
} | |||
.back-to-top-container a { | |||
width: 45px; | |||
height: 45px; | |||
font-size: 12px; | |||
} | |||
} | |||
</style> | |||
Revision as of 22:10, 20 February 2026
<a href="#" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">↑ Top</a>
<style> .back-to-top-container {
position: fixed; bottom: 30px; right: 30px; z-index: 9999;
} .back-to-top-container a {
background: linear-gradient(135deg, #FF6A00, #D93800); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 2px solid white; transition: all 0.3s ease; cursor: pointer;
} .back-to-top-container a:hover {
background: linear-gradient(135deg, #FF7A20, #F4B400); transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); color: white; text-decoration: none;
} @media (max-width: 768px) {
.back-to-top-container {
bottom: 20px;
right: 20px;
}
.back-to-top-container a {
width: 45px;
height: 45px;
font-size: 12px;
}
} </style>
