Discover a high-performance solution to the scroll event issue at CSS Tricks Website.
Check out the solution on Fiddle
Reference the CSS Tricks article
Update your code with a "Back to Top" button implementation. Ensure the body position is set to "relative", and any adjustments in HTML, CSS, or JS should be labeled with an "Adjustment" comment.
The red horizontal line acts as a reference point and can be removed or made invisible by adjusting its style, background, and content. Position the reference line top according to where you want the "Back to Top Button" to appear.
/* Redirect to index pages */
function men_index_fn()
{
location.href='index_men.html';
}
function women_index_fn()
{
location.href='index_women.html';
}
function children_index_fn()
{
location.href='index_children.html';
}
/* Update navbar icon */
function change_img_cart()
{
document.getElementById("shop_cart_ico").src = "Icons/shopping-cart.png";
}
function change_img_cart_2()
{
document.getElementById("shop_cart_ico").src = "Icons/shopping-cart-white.png";
}
function change_img_fav()
{
document.getElementById("favorite_btn_ico").src = "Icons/favorite-black.png";
}
function change_img_fav_2()
{
document.getElementById("favorite_btn_ico").src = "Icons/favorite-white.png";
}
function change_img_user()
{
document.getElementById("user_btn_ico").src = "Icons/user-black.png";
}
function change_img_user_2()
{
document.getElementById("user_btn_ico").src = "Icons/user-white.png";
}
/* Back to top button */
/* Adjustment */
if (
"IntersectionObserver" in window &&
"IntersectionObserverEntry" in window &&
"intersectionRatio" in window.IntersectionObserverEntry.prototype
) {
let observer = new IntersectionObserver(entries => {
if (entries[0].boundingClientRect.y < 0) {
document.querySelector('.top_btn').className="top_btn show-button";
} else {
document.querySelector('.top_btn').className="top_btn";
}
});
observer.observe(document.querySelector("#reference-line"));
}
function to_top()
{
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
/* Toggle Navbar X menu */
function menu(x)
{
x.classList.toggle("change");
}
#body
{
background-color: #e3dcd2;
scroll-behavior: smooth;
/* Adjustment */
/* Set Body Position to relative in order for
absolute positioned reference line
to work over the body */
position: relative;
}
/* Navbar Styling */
#navbar1
{
background-color: #013328;
z-index: 3;
}
#navbar_logo
{
height: 60px;
width: 60px;
border: 20;
}
#src_btn
{
border-color: #e3dcd2;
color: #e3dcd2;
}
#src_btn:hover
{
background-color: #e3dcd2;
color: #013328;
}
#navbar_men, #navbar_women, #navbar_children
{
color: #e3dcd2;
width: 90px;
}
...
/* Footer Styling */
footer.nb-footer
{
background: #100c0d;
border-top: 4px solid #cc8b65;
}
footer.nb-footer .about
{
margin: 0 auto;
margin-top: 40px;
max-width: 1170px;
text-align: center;
}
...
footer.nb-footer .about .social-media
{
margin-top: 15px;
}
#social
{
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
font-size: 16px;
color: #cc8b65;
border: 1px solid rgba(255, 255, 255, 0.3);
text-decoration: none;
}
#social:hover
{
background: #cc8b65;
color: #fff;
border-color: #cc8b65;
}
img{
alt: "image"
}