Button appearing at the top of the screen on mobile devices

I have a "back to top" button that starts off invisible, then as you scroll down, it slides up a bit and sticks to the bottom right corner until the end of the page. However, the button is not behaving as expected. I've tried placing the button below the footer, but it leaves a blank space. I also attempted to place it above the footer, but it stops before the end of the page, especially on smaller devices like phones and tablets. Changing the button from sticky to fixed helped, but I want it to be hidden when the page first loads and only appear when the user scrolls down.

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

/* Remaining code shortened for preview */ 

Answer №1

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"
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The request response was a JSON object that started with the keyword "POST"

My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

Utilize AJAX to retrieve the output of a PHP randomizer

Current situation: I have a PHP file with a randomizer function and HTML that utilizes this function to display strings from a separate text document. The Function: <?php function rand_line($fileName, $maxLineLength = 4096) { $handle = @fopen($fileN ...

Implementing transparency to clip-path using HTML and CSS

How can I apply opacity to the clip-path/clip area, similar to the image shown below? Please find my code snippet for reference: .item--clip .demo { width: 200px; height: 250px; } .item--clip .has-mask { position: absolute; clip: rect(10px, 19 ...

Unable to import CSV file

I'm currently in the process of developing a CSV editor that involves importing a CSV file and converting it into HTML tables. Below is the code I have been working on: <html> <head> <title></title> </head> <body& ...

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

`Center Google My Map Location - Embedded in the Middle of the Page`

Recently, I transitioned to using an embedded My Map for a business with 2 locations. However, I encountered some challenges in customizing the map's height, width, and centering on the page. Is there a way to resolve this issue? New HTML code which ...

AJAX is designed to only modify one specific Django model instance at a time

My Django project displays a list of "issue" objects, each with a boolean field called "fixed". I am looking to implement a feature where users can press a button that will modify the "fixed" status using Ajax. However, currently, the button only changes o ...

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling. Here is the code for my dropdown: <select multiple class="dropdown-menu"> ...

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

Could really use a hand getting this card grid to be more responsive

Recently, I delved into using HTML & CSS for work. However, I encountered a major hurdle: creating responsive Grid card elements. I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a t ...

Creating a basic jQuery button to switch an element's background color is a breeze

I'm new to this, so I hope this is a straightforward question. I'd like to use the bgtoggle class as a button to switch the background color of the metro class. I know I'm doing something wrong because it's not working as expected. Any ...

Is the form being submitted with the href attribute?

Does this code ensure security? <form id="form-id"> <input type='text' name='name'> <input type='submit' value='Go' name='Go'/></form> <a href="#" onclick="docume ...

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

I am encountering an issue where my ejs file is not rendering properly even after moving my static files to the public folder and including the line of code app.use(express.static("public")). Can anyone help

After relocating the index.html and css files to the public folder and adding app.use(express.static("public)) in app.js, everything was working fine and the list.ejs was rendering correctly. However, there seems to be an issue now. const express = re ...

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

I am having a slight issue with my dropdown button where I am trying to display the selected item as the value of the dropdown button. The Flag Icon and Text should be changing dynamically. I have tried some examples but it seems that it is not working as ...

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...