0

so i have a "back to top" button that i wanted to be not visible in the begining then when you scroll down a bit the button slides up a bit then sticks on the bottom right corner and stays there till the page end. my problem is that the button doesn't really work how i intended it to. i tried putting the button below my footer but it leaves a blank space below it. i also tried putting it above the footer but then it stops before the the page ends and on smaller devices(phones, tablets,etc..). i tried changing the button from sticky to fixed and it worked for the most part but i want the button to be hidden when the page first loads and only appears when the user scrolls down a bit.

/* Send to index*/

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';
}

/* Change 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 */

function to_top() 
{
    document.documentElement.scrollTop = 0; 
    document.body.scrollTop = 0;
}

/* Navbar X menu */

function menu(x) 
{
    x.classList.toggle("change");
}
#body
{
    background-color: #e3dcd2;
    scroll-behavior: smooth;
}


/* Navbar */

#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;
}

#navbar_men:hover, #navbar_women:hover, #navbar_children:hover
{
    background-color: #e3dcd2;
    color: #013328;
}

#favorite_btn:hover, #user_btn:hover, #shop_cart_btn:hover
{
    background-color: #e3dcd2;
}

.container_menu 
{
    display: inline-block;
    cursor: pointer;
}
  
.bar1, .bar2, .bar3 
{
    width: 35px;
    height: 5px;
    background-color: #e3dcd2;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 
{
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 
{
    opacity: 0;
}
  
.change .bar3 
{
    transform: translate(0, -11px) rotate(45deg);
}

/* Caroussel */

#car_text
{
    background-color: #e3dcd2;
    color: #013328;
}

#car_men_btn, #car_women_btn, #car_child_btn
{
    background-color: #013328;
    color: #e3dcd2;
    width: 100px;
}

#car_child_btn
{
    margin-top: 5px;
}

#car_men_btn:hover, #car_women_btn:hover, #car_child_btn:hover
{
    background-color: #cc8b65;
    color: #e3dcd2;
    width: 100px;
}

#car_pic1, #car_pic2, #car_pic3, #car_pic4
{
    border-radius: 5px;
    width: 100%;
}

.carousel-caption
{
    position: sticky;
    bottom: 10%;
    left: 5%;
    z-index: 2;
}

/* Back to top button */

#top_btn 
{
    --offset: 50px; 
    position: sticky;
    float: right;
    margin-right: 15px;
    bottom: 20px;      
    place-self: end;
    margin-top: calc(100vh + var(--offset));
    padding: 10px;
    background: #013328;
    color: #e3dcd2;
    border: none;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    outline: none;
    box-shadow: 0 9px #666;
    right: 0;
}

#top_ico
{
    height: 40px;
    width: 40px;
}

  
#top_btn:hover 
{
    background-color: #013328;
}
  
#top_btn:active 
{
    background-color: #013328;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

/* Services */

#srv_men, #srv_women, #srv_child
{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.container-srv 
{
    position: relative;
    width: 50%;
}
  
.container-srv img 
{
    width: 100%;
    height: auto;
}
  
.container-srv .btn-srv 
{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #e3dcd2;
    color: #013328;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: all ease 1s;
}
  
.container-srv:hover .btn-srv 
{
    background-color: #013328;
    color: #e3dcd2;
    opacity: 1;
}

.figure
{
    position: relative;
    display: inline-block;
}

#srv_txt
{
    position: absolute;
    left: 0;
    right: 0;
    top: 65%;
    color: #e3dcd2;
    text-align: center;
    opacity: 1;
    transition: all ease 1s;
}

.figure:hover #srv_txt
{
    opacity: 0;
}

.figure .span1:before
{
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span1:after
{
    content: '';
    position: absolute;
    top: 5%;
    right: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span2:before
{
    content: '';
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span2:after
{
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}

.figure:hover .span1:before
{
    animation: border-top 0.3s linear;
    transform-origin: left;
    background-color: #e3dcd2;
}

@keyframes border-top
{
    0%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span1:after
{
    animation: border-right 0.6s linear;
    transform-origin: top;
    background-color: #e3dcd2;
}

@keyframes border-right
{
    0%, 50%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span2:before
{
    animation: border-bottom 0.9s linear;
    transform-origin: right;
    background-color: #e3dcd2;
}

@keyframes border-bottom
{
    0%, 75%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span2:after
{
    animation: border-left 1.2s linear;
    transform-origin: bottom;
    background-color: #e3dcd2;
}

@keyframes border-left
{
    0%, 80%
    {
        transform: scaleX(0);
    }
}
/* FAQ navbar */

#faq_nav
{
    height: 35px;
    padding-top: 0;
}

.faq_items
{
    font-size: x-small;
    margin-top: 0;
    margin-right: 5px;
    margin-left: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#lang
{
    align-items: flex-end;
    font-size: xx-small;
    float: right;
    width: 50px;
    height: fit-content;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}

.topnav 
{
    background-color: #cc8b65;
    overflow: hidden;
}

.topnav button 
{
  float: left;
  background-color: #cc8b65;
  color: #e3dcd2;
  width: 50px;
  height: fit-content;
  margin-top: 7px;
  margin-bottom: 5px;
  border-style: none;
  border-radius: 5px;
}

.topnav button:hover 
{
  color: #100c0d;
  background-color: #e3dcd2;
}

.topnav-right 
{
  float: right;
}

#eng
{
    width: 30px;
    height: 30px;
}

#frc, #arb
{
    width: 30px;
    height: 22px;
}

/* Brands */

#brand_title
{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

#brand_img_adidas
{
    width: 150px;
    height: 100px;
    max-width: 100%;
    margin-left: 10px;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_nike
{
    width: 200px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_north
{
    width: 150px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_tommy
{
    width: 150px;
    height: 120px;
    margin-left: 20px;
    max-width: 100%;
    margin-right: 0;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_zara
{
    width: 150px;
    height: 150px;
    margin-left: 10px;
    margin-right: 0;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#zara_div :hover ,#adidas_div :hover, #nike_div :hover, #northface_div :hover, #tommy_div :hover
{
    transform: scale(1.5);
    filter: grayscale(0%);
}

@media screen and (max-width: 320px) 
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 60px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 376px) and (min-width: 321px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 90px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 576px) and (min-width: 376px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 120px;
        margin-bottom: 30px;
    }
}

/* Footer */

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 p 
{
font-size: 13px;
color: #999;
margin-top: 30px; 
}

footer.nb-footer .footer-info-single 
{
margin-top: 30px; 
}

footer.nb-footer .footer-info-single .title 
{
color: #e3dcd2;
text-transform: uppercase;
font-size: 16px;
border-left: 4px solid #cc8b65;
padding-left: 5px; 
}

footer.nb-footer .footer-info-single ul li a 
{
display: block;
color: #e3dcd2;
padding: 2px 0; 
}

footer.nb-footer .footer-info-single ul li a:hover 
{
color: #cc8b65; 
}

footer.nb-footer .footer-info-single p 
{
font-size: 13px;
line-height: 20px;
color: #e3dcd2; 
}

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; 
}
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Bilal el Badaoui">
  <meta name="description" content="The best clothes for the best price">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>S&B Clothes</title>
      <link rel="icon" type="image/x-icon" href="logo/icon.png">
  </head>

  <body id="body">

    >
    <!--faq and language-->

    <div class="topnav">
      <button class="faq_items">About</button>
      <button class="faq_items">Contact</button>
      <button class="faq_items">F.A.Qs</button>
      <button class="faq_items">Help</button>
      <div class="topnav-right">
        <button type="button" class="btn dropdown-toggle" id="lang" data-bs-toggle="dropdown">
          eng
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="index.html">English</a> 
          </li>
          <li>
            <a class="dropdown-item" href="index_frc.html">French</a> 
          </li>
          <li>
            <a class="dropdown-item" href="index_arb.html">Arabic</a> 
          </li>
        </ul>
      </div> 
    </div>

    <!--Navbar-->

    <nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <img src="logo/logo_img.png" class="rounded" id="navbar_logo">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
          <div class="container_menu" onclick="menu(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </div> 
        </button>
        <div class="collapse navbar-collapse" id="men_women">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
            </li>
          </li>
          <li class="nav-item">
            <button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
          </li>
          </ul>
        </div>
        <div class="input-group rounded">
          <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
          <button type="button" class="btn rounded" id="src_btn">Search</button>
        </div>
        <div>
          <button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
            <img src="Icons/user-white.png" id="user_btn_ico"/>
          </button>
        </div>
        <div>
          <button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
            <img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
          </button>
        </div>
        <div>
          <button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
            <img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>
          </button>
        </div>
      </div>
    </nav>

    <!--Caroussel-->

    <div class="container">
      <div class="row">
        <div id="car1" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#car1" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="3"></button>
          </div>
          <div class="carousel-caption">
            <hgroup>
              <h1 id="car_text">This is S&B</h1>
              <h3 id="car_text">From our large varieties of fashion clothing</h3>
              <h4 id="car_text">Shop for</h4>
              <button type="button" class="btn rounded" onclick="men_index_fn()" id="car_men_btn">Men</button>
              <button type="button" class="btn rounded" onclick="women_index_fn()" id="car_women_btn">Women</button>
            </hgroup>
            <div>
              <button type="button" class="btn rounded" onclick="children_index_fn()" id="car_child_btn">Children</button>
            </div>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="caroussel_img/car_tmp_pic1.jpg" alt="Clothing 1" class="d-block" id="car_pic1">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic2.jpg" alt="Clothing 2" class="d-block" id="car_pic2">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic3.jpg" alt="clothing 3" class="d-block" id="car_pic3">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic4.jpg" alt="clothing 4" class="d-block" id="car_pic4">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#car1" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#car1" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>

    <!--Services--> 

    <div class="container">
      <div class="row">
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/women.jpg" alt="Women clothing" id="srv_women">
          <button class="btn-srv" onclick="women_index_fn()">Shop for women</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For women</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/children.jpg" alt="Children clothing" id="srv_child">
          <button class="btn-srv" onclick="children_index_fn()">Shop for children</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For children</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/men.jpg" alt="Men clothing" id="srv_men">
          <button class="btn-srv" onclick="men_index_fn()">Shop for men</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For men</h2>
        </div>
      </div>
    </div>

    <!-- Back to top -->
     
    <button onclick="to_top()" id="top_btn">
      <img src="Icons/uparrow.png" id="top_ico">
    </button>

    <!-- Services -->

    <div>
      <h1 id="brand_title"><b>TRENDING BRANDS</b></h1>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm" id="adidas_div">
          <a href="adidas.html">
            <img src="brands/Adidas-Logo.png" alt="Adidas" id="brand_img_adidas">
          </a>
        </div>
        <div class="col-sm" id="nike_div">
          <a href="nike.html">
            <img src="brands/Nike_logo.png" alt="Nike" id="brand_img_nike">
          </a>
        </div>
        <div class="col-sm" id="northface_div">
          <a href="northface.html">
            <img src="brands/The-North-Face-color.png" alt="North Face" id="brand_img_north">
          </a>
        </div>
        <div class="col-sm" id="tommy_div">
          <a href="tommy.html">
            <img src="brands/Tommy-Hilfiger-Emblem.png" alt="Tommy Hilfiger" id="brand_img_tommy">
          </a>
        </div>
        <div class="col-sm" id="zara_div">
          <a href="zara.html">
            <img src="brands/zara-logo-0.png" alt="Zara" id="brand_img_zara">
          </a>
        </div>
      </div>
    </div>

    <!--Footer-->

    <footer class="nb-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="about">
              <img src="images/logo.png" class="img-responsive center-block" alt="">
              <p>Follow us on our social media accounts</p>
              <div class="social-media">
                <a href="#" class="fa fa-facebook" id="social"></a>
                <a href="#" class="fa fa-google" id="social"></a>
                <a href="#" class="fa fa-instagram" id="social"></a>
                <a href="#" class="fa fa-whatsapp" id="social"></a>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Help Center</h2>
              <ul class="list-unstyled">
                <li><a href="help.html"><i class="fa fa-angle-double-right"></i>Help</a></li>
                <li><a href="faq.html"><i class="fa fa-angle-double-right"></i>FAQs</a></li>
                <li><a href="about.html"><i class="fa fa-angle-double-right"></i>About</a></li>
                <li><a href="contact.html"><i class="fa fa-angle-double-right"></i>Contact</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Products for</h2>
              <ul class="list-unstyled">
                <li><a href="index_women.html"><i class="fa fa-angle-double-right"></i>Women</a></li>
                <li><a href="index_men.html"><i class="fa fa-angle-double-right"></i>Men</a></li>
                <li><a href="index_children.html"><i class="fa fa-angle-double-right"></i>Children</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Contact</h2>
              <ul class="list-unstyled">
                <li>
                  <a href="https://www.google.com/maps/place/Salé/">
                    <i class="fa fa-angle-double-right"></i>
                    Morocco, Salé, 
                  </a> 
                </li>
                <li>
                  <a href="mailto:hbhbhbhbhbhh@gmail.com">
                    <i class="fa fa-angle-double-right"></i>
                    hhbhbhbbh@gmail.com
                  </a>
                </li>
                <li>
                  <a href="tel:+212772327441" title="">
                    <i class="fa fa-angle-double-right"></i>
                    +21234343434343
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">S&B</h2>
              <p>S&B offers you the best clothes for the best prices, your style your choice.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>
Bilal El Badaoui
  • 23
  • 3
  • Updated the answer with your code and modified the appearance of the back to top button. It should work properly now. The button will appear after passing the horizontal red line which you could modify its position dynamically for difference screens using responsive media queries, test it and if it works, mark answer as accepted. – Abdelrahman Mar 20 '23 at 16:51

1 Answers1

0

There is an answer with good performance to this problem without using any scroll event listeners at CSS Tricks Website.

Here's solution in fiddle

CSS Tricks source Ref

Update! Implemenation of "Back To Top" Button no your code. Don't forget to put body position to "relative", and adjustment made in HTML,CSS or JS would be marked with "Adjustment" comment.

The red horizontal line is for reference, in your implementation you would remove its style, background and content in order to make it invisible. Adjust the reference line top position to the point you would like the "Back To Top Button" to appear.

/* Send to index*/

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';
}

/* Change 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;
}

/* 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 */

#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;
}

#navbar_men:hover, #navbar_women:hover, #navbar_children:hover
{
    background-color: #e3dcd2;
    color: #013328;
}

#favorite_btn:hover, #user_btn:hover, #shop_cart_btn:hover
{
    background-color: #e3dcd2;
}

.container_menu 
{
    display: inline-block;
    cursor: pointer;
}
  
.bar1, .bar2, .bar3 
{
    width: 35px;
    height: 5px;
    background-color: #e3dcd2;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 
{
    transform: translate(0, 11px) rotate(-45deg);
}
  
.change .bar2 
{
    opacity: 0;
}
  
.change .bar3 
{
    transform: translate(0, -11px) rotate(45deg);
}

/* Caroussel */

#car_text
{
    background-color: #e3dcd2;
    color: #013328;
}

#car_men_btn, #car_women_btn, #car_child_btn
{
    background-color: #013328;
    color: #e3dcd2;
    width: 100px;
}

#car_child_btn
{
    margin-top: 5px;
}

#car_men_btn:hover, #car_women_btn:hover, #car_child_btn:hover
{
    background-color: #cc8b65;
    color: #e3dcd2;
    width: 100px;
}

#car_pic1, #car_pic2, #car_pic3, #car_pic4
{
    border-radius: 5px;
    width: 100%;
}

.carousel-caption
{
    position: sticky;
    bottom: 10%;
    left: 5%;
    z-index: 2;
}

/* Back to top button */

/* Adjustment */


#reference-line {
  position: absolute;
  width: 100%;
  top: 40%;  /* Adjust This to your desired value */
  left: 0;
  
  /* To Remove */
  z-index: 9999;
  background: red;
  color: white;
}


.top_btn 
{
  
  position: fixed;
  top: 100%;
  z-index: 9999;
  right: 5%;
  transition:  transform .5s ease, top .5s ease-out; 
  padding: 10px;
  background: #013328;
  color: #e3dcd2;
  border: none;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* box-shadow: 0 9px #666; */
}

.show-button{
  top: 95%;
  transform: translateY(-100%);
}


#top_ico
{
    height: 40px;
    width: 40px;
}

  
#top_btn:hover 
{
    background-color: #013328;
}
  
#top_btn:active 
{
    background-color: #013328;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

/* Services */

#srv_men, #srv_women, #srv_child
{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}

.container-srv 
{
    position: relative;
    width: 50%;
}
  
.container-srv img 
{
    width: 100%;
    height: auto;
}
  
.container-srv .btn-srv 
{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #e3dcd2;
    color: #013328;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: all ease 1s;
}
  
.container-srv:hover .btn-srv 
{
    background-color: #013328;
    color: #e3dcd2;
    opacity: 1;
}

.figure
{
    position: relative;
    display: inline-block;
}

#srv_txt
{
    position: absolute;
    left: 0;
    right: 0;
    top: 65%;
    color: #e3dcd2;
    text-align: center;
    opacity: 1;
    transition: all ease 1s;
}

.figure:hover #srv_txt
{
    opacity: 0;
}

.figure .span1:before
{
    content: '';
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span1:after
{
    content: '';
    position: absolute;
    top: 5%;
    right: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span2:before
{
    content: '';
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: transparent;
    margin: 0 auto;
}

.figure .span2:after
{
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 1px;
    height: 90%;
    background-color: transparent;
    margin: 0 auto;
}

.figure:hover .span1:before
{
    animation: border-top 0.3s linear;
    transform-origin: left;
    background-color: #e3dcd2;
}

@keyframes border-top
{
    0%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span1:after
{
    animation: border-right 0.6s linear;
    transform-origin: top;
    background-color: #e3dcd2;
}

@keyframes border-right
{
    0%, 50%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span2:before
{
    animation: border-bottom 0.9s linear;
    transform-origin: right;
    background-color: #e3dcd2;
}

@keyframes border-bottom
{
    0%, 75%
    {
        transform: scaleX(0);
    }
}

.figure:hover .span2:after
{
    animation: border-left 1.2s linear;
    transform-origin: bottom;
    background-color: #e3dcd2;
}

@keyframes border-left
{
    0%, 80%
    {
        transform: scaleX(0);
    }
}
/* FAQ navbar */

#faq_nav
{
    height: 35px;
    padding-top: 0;
}

.faq_items
{
    font-size: x-small;
    margin-top: 0;
    margin-right: 5px;
    margin-left: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#lang
{
    align-items: flex-end;
    font-size: xx-small;
    float: right;
    width: 50px;
    height: fit-content;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}

.topnav 
{
    background-color: #cc8b65;
    overflow: hidden;
}

.topnav button 
{
  float: left;
  background-color: #cc8b65;
  color: #e3dcd2;
  width: 50px;
  height: fit-content;
  margin-top: 7px;
  margin-bottom: 5px;
  border-style: none;
  border-radius: 5px;
}

.topnav button:hover 
{
  color: #100c0d;
  background-color: #e3dcd2;
}

.topnav-right 
{
  float: right;
}

#eng
{
    width: 30px;
    height: 30px;
}

#frc, #arb
{
    width: 30px;
    height: 22px;
}

/* Brands */

#brand_title
{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

#brand_img_adidas
{
    width: 150px;
    height: 100px;
    max-width: 100%;
    margin-left: 10px;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_nike
{
    width: 200px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_north
{
    width: 150px;
    height: 100px;
    margin-left: 20px;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_tommy
{
    width: 150px;
    height: 120px;
    margin-left: 20px;
    max-width: 100%;
    margin-right: 0;
    transition: 0.5s;
    filter: grayscale(100%);
}

#brand_img_zara
{
    width: 150px;
    height: 150px;
    margin-left: 10px;
    margin-right: 0;
    max-width: 100%;
    transition: 0.5s;
    filter: grayscale(100%);
}

#zara_div :hover ,#adidas_div :hover, #nike_div :hover, #northface_div :hover, #tommy_div :hover
{
    transform: scale(1.5);
    filter: grayscale(0%);
}

@media screen and (max-width: 320px) 
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 60px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 376px) and (min-width: 321px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 90px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 576px) and (min-width: 376px)
{
    #brand_img_zara ,#brand_img_tommy ,#brand_img_north ,#brand_img_nike ,#brand_img_adidas
    {
        margin-left: 120px;
        margin-bottom: 30px;
    }
}

/* Footer */

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 p 
{
font-size: 13px;
color: #999;
margin-top: 30px; 
}

footer.nb-footer .footer-info-single 
{
margin-top: 30px; 
}

footer.nb-footer .footer-info-single .title 
{
color: #e3dcd2;
text-transform: uppercase;
font-size: 16px;
border-left: 4px solid #cc8b65;
padding-left: 5px; 
}

footer.nb-footer .footer-info-single ul li a 
{
display: block;
color: #e3dcd2;
padding: 2px 0; 
}

footer.nb-footer .footer-info-single ul li a:hover 
{
color: #cc8b65; 
}

footer.nb-footer .footer-info-single p 
{
font-size: 13px;
line-height: 20px;
color: #e3dcd2; 
}

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"
}
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Bilal el Badaoui">
  <meta name="description" content="The best clothes for the best price">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>S&amp;B Clothes</title>
    <link rel="icon" type="image/x-icon" href="logo/icon.png">
  </head>

  <body id="body">

    >
    <!--faq and language-->
    
     <!-- Adjustment -->
    <div id="reference-line">Reference Line</div>

    <div class="topnav">
      <button class="faq_items">About</button>
      <button class="faq_items">Contact</button>
      <button class="faq_items">F.A.Qs</button>
      <button class="faq_items">Help</button>
      <div class="topnav-right">
        <button type="button" class="btn dropdown-toggle" id="lang" data-bs-toggle="dropdown">
          eng
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="index.html">English</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_frc.html">French</a>
          </li>
          <li>
            <a class="dropdown-item" href="index_arb.html">Arabic</a>
          </li>
        </ul>
      </div>
    </div>

    <!--Navbar-->

    <nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <img src="logo/logo_img.png" class="rounded" id="navbar_logo">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
          <div class="container_menu" onclick="menu(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="men_women">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
            </li>
          </ul>
        </div>
        <div class="input-group rounded">
          <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
          <button type="button" class="btn rounded" id="src_btn">Search</button>
        </div>
        <div>
          <button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
            <img src="Icons/user-white.png" id="user_btn_ico" />
          </button>
        </div>
        <div>
          <button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
            <img src="Icons/favorite-white.png" id="favorite_btn_ico" />
          </button>
        </div>
        <div>
          <button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
            <img src="Icons/shopping-cart-white.png" id="shop_cart_ico" />
          </button>
        </div>
      </div>
    </nav>

    Caroussel

    <div class="container">
      <div class="row">
        <div id="car1" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#car1" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#car1" data-bs-slide-to="3"></button>
          </div>
          <div class="carousel-caption">
            <hgroup>
              <h1 id="car_text">This is S&amp;B</h1>
              <h3 id="car_text">From our large varieties of fashion clothing</h3>
              <h4 id="car_text">Shop for</h4>
              <button type="button" class="btn rounded" onclick="men_index_fn()" id="car_men_btn">Men</button>
              <button type="button" class="btn rounded" onclick="women_index_fn()" id="car_women_btn">Women</button>
            </hgroup>
            <div>
              <button type="button" class="btn rounded" onclick="children_index_fn()" id="car_child_btn">Children</button>
            </div>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="caroussel_img/car_tmp_pic1.jpg" alt="Clothing 1" class="d-block" id="car_pic1">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic2.jpg" alt="Clothing 2" class="d-block" id="car_pic2">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic3.jpg" alt="clothing 3" class="d-block" id="car_pic3">
            </div>
            <div class="carousel-item">
              <img src="caroussel_img/car_tmp_pic4.jpg" alt="clothing 4" class="d-block" id="car_pic4">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#car1" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#car1" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>

    Services

    <div class="container">
      <div class="row">
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/women.jpg" alt="Women clothing" id="srv_women">
          <button class="btn-srv" onclick="women_index_fn()">Shop for women</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For women</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/children.jpg" alt="Children clothing" id="srv_child">
          <button class="btn-srv" onclick="children_index_fn()">Shop for children</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For children</h2>
        </div>
        <div class="figure container-srv col-sm-4 mt-3">
          <img src="services/men.jpg" alt="Men clothing" id="srv_men">
          <button class="btn-srv" onclick="men_index_fn()">Shop for men</button>
          <span class="span1"></span>
          <span class="span2"></span>
          <h2 id="srv_txt">Explore our catalog<br>For men</h2>
        </div>
      </div>
    </div>

    Back to top
    
    <!-- Adjustment: Change top_btn id to class as 
    ids have higher precedence over classes
    and show-button class won't work-->
    <button onclick="to_top()" class="top_btn">
      <img src="Icons/uparrow.png" id="top_ico">
    </button>

    <!-- Services -->

    <div>
      <h1 id="brand_title"><b>TRENDING BRANDS</b></h1>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm" id="adidas_div">
          <a href="adidas.html">
            <img src="brands/Adidas-Logo.png" alt="Adidas" id="brand_img_adidas">
          </a>
        </div>
        <div class="col-sm" id="nike_div">
          <a href="nike.html">
            <img src="brands/Nike_logo.png" alt="Nike" id="brand_img_nike">
          </a>
        </div>
        <div class="col-sm" id="northface_div">
          <a href="northface.html">
            <img src="brands/The-North-Face-color.png" alt="North Face" id="brand_img_north">
          </a>
        </div>
        <div class="col-sm" id="tommy_div">
          <a href="tommy.html">
            <img src="brands/Tommy-Hilfiger-Emblem.png" alt="Tommy Hilfiger" id="brand_img_tommy">
          </a>
        </div>
        <div class="col-sm" id="zara_div">
          <a href="zara.html">
            <img src="brands/zara-logo-0.png" alt="Zara" id="brand_img_zara">
          </a>
        </div>
      </div>
    </div>

    <!--Footer-->

    <footer class="nb-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="about">
              <img src="images/logo.png" class="img-responsive center-block" alt="">
              <p>Follow us on our social media accounts</p>
              <div class="social-media">
                <a href="#" class="fa fa-facebook" id="social"></a>
                <a href="#" class="fa fa-google" id="social"></a>
                <a href="#" class="fa fa-instagram" id="social"></a>
                <a href="#" class="fa fa-whatsapp" id="social"></a>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Help Center</h2>
              <ul class="list-unstyled">
                <li><a href="help.html"><i class="fa fa-angle-double-right"></i>Help</a></li>
                <li><a href="faq.html"><i class="fa fa-angle-double-right"></i>FAQs</a></li>
                <li><a href="about.html"><i class="fa fa-angle-double-right"></i>About</a></li>
                <li><a href="contact.html"><i class="fa fa-angle-double-right"></i>Contact</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Products for</h2>
              <ul class="list-unstyled">
                <li><a href="index_women.html"><i class="fa fa-angle-double-right"></i>Women</a></li>
                <li><a href="index_men.html"><i class="fa fa-angle-double-right"></i>Men</a></li>
                <li><a href="index_children.html"><i class="fa fa-angle-double-right"></i>Children</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">Contact</h2>
              <ul class="list-unstyled">
                <li>
                  <a href="https://www.google.com/maps/place/Salé/">
                    <i class="fa fa-angle-double-right"></i>
                    Morocco, Salé,
                  </a>
                </li>
                <li>
                  <a href="mailto:hbhbhbhbhbhh@gmail.com">
                    <i class="fa fa-angle-double-right"></i>
                    hhbhbhbbh@gmail.com
                  </a>
                </li>
                <li>
                  <a href="tel:+212772327441" title="">
                    <i class="fa fa-angle-double-right"></i>
                    +21234343434343
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="footer-info-single">
              <h2 class="title">S&amp;B</h2>
              <p>S&amp;B offers you the best clothes for the best prices, your style your choice.</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>

</html>
Abdelrahman
  • 525
  • 1
  • 4
  • 13
  • idk if i'm missing something but when i tried to test the code on my computer nothing happened all i got is the lorem text and button didn't show up – Bilal El Badaoui Mar 10 '23 at 13:15
  • @BilalElBadaoui I tested it on chrome and firefox and it's working fine and the button is showing at the bottom of the page (with gray background), you may add more context (.e.g. the browser you're using and version) – Abdelrahman Mar 10 '23 at 16:05
  • @BilalElBadaoui The button will show as you scroll and pass more than 50% of the page and not as you first run the code, I believe that's the functionality that you wanted – Abdelrahman Mar 10 '23 at 21:56
  • i'm using edge as my browser and the button doesn't show up at all no matter how far i scroll down – Bilal El Badaoui Mar 14 '23 at 08:39
  • @BilalElBadaoui I tried it on edge version 110 on laptop it works, on mobile phone the stackoverflow run code button doesn't show up and that's is a stackoverflow mobile support issue for edge, so I can't run the code to test if it works or not, on chrome it works fine on both mobile phone and laptop. Try update your version if it's outdated or try using a different browser in case you're testing from phone. – Abdelrahman Mar 14 '23 at 08:57
  • i've tried all that but i just can't get it to work – Bilal El Badaoui Mar 20 '23 at 11:27
  • @BilalElBadaoui I really want to help, but I don't know the problem, as a last attempt I will try to implement it in your code "action button" and I will update the answer when I am done. – Abdelrahman Mar 20 '23 at 12:32