Tips for keeping buttons anchored at the bottom of the page during scrolling

As a newcomer to Ionic, HTML, and CSS, I am currently exploring how to keep a button fixed while scrolling through the page. Despite specifying a fixed position in the CSS, the button does not remain fixed as intended.

The button seems to be having trouble staying fixed at the bottom of the page.


  .fix-bottom {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

  .d-flex {
  display: flex;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

<div class="fix-bottom btn-shadow ">
  <div class="d-flex">
    <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD TO CART</button>
    <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY NOW</button>
  </div>
</div>
htmlcssionic-framework

Answer №1

If you'd like to position your button at the bottom of the page, you can achieve this by placing it within the ion-footer element as shown below:

 <ion-content>.... </ion-content>
<ion-footer>
  <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD
    TO CART</button>
  <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY
    NOW</button>
</ion-footer>

I have tested this code in a template and confirmed that it works correctly. Feel free to give it a try.

Answer №2

Check out this example where the button remains fixed at the bottom as you scroll up. It's achieved using simple CSS styling. I've repeated the paragraph several times to demonstrate the scrolling effect.

#bottom button {
  position: fixed;
  right: 10%;
  bottom: 0%;
  z-index: 1000;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  filter: progid: dximagetransform.microsoft.basicimage(rotation=3);
  text-align: center;
  text-decoration: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>I am fairly new to Ionic, HTML, and CSS. I am trying to understand how to keep a button fixed while scrolling the page. Despite setting the fixed value in the CSS, the button doesn't stay fixed.</p>

<p>The button does not remain fixed at the bottom. I am relatively new to Ionic, HTML, and CSS and working on figuring out how to make the button stay fixed when scrolling. Even with a fixed value set in the CSS, the button doesn't seem to stay in place.</p>;

<p>Even after explicitly setting the button to be fixed in CSS, it still doesn't remain at the bottom, which is causing me some confusion as a beginner in Ionic, HTML, and CSS.</p>;

<p>Despite my attempts to keep the button fixed by adjusting the CSS values, it continues to move rather than staying fixed at the bottom of the page.</p>;

<div id="bottom">
    <button id="bot_open" class="btn btn-primary btn-rounded">Button</button>
  </div>

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

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

The Chrome browser is not displaying the Ajax loader

I've been using a please-wait .gif image for my ajax loader, and it was working perfectly in Chrome until recently. There hasn't been any changes to the image itself, and it still displays correctly in IE, Mozilla, and other browsers. I'm p ...

htmlajaxdomajax-request

PHP query for beginners. Integrating JavaScript into a PHP webpage

Hey there! I am not familiar with PHP development, as I have never worked with it before. However, I have been tasked with adding a Google Shopping cart tracking code to a website. After someone completes an order, they are sent to finishorder.php. Upon re ...

phpjavascripthtml

Html elements overlapping due to incorrect positioning

I'm having an issue with my div elements on a web page. Despite them being set up separately, they all end up positioned underneath the first div created (SiteFullControl). Is there any solution to prevent this from happening? <div id="SiteFullCo ...

csshtml

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...

htmlcss

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

htmlcss

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...

htmlcss

What steps should be taken when encountering the "Cannot Get" error message on a webpage?

Currently, I am in the process of creating an HTML file within xcode with the intention of displaying its contents in the browser. With an empty file as my starting point, the following code was added: <html> <head> <title>HTML is S ...

htmlxcodenpmbrowser-sync

Adding a space after a comma automatically upon saving changes in VSCode

Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...

javascripthtmlvisual-studio-code

insert a gap between two elements in the identical line

Is there a way to create spacing between two text fields in the same row? I have tried using margins, paddings, and display flex in the css file but haven't been successful. import "./styles.css"; import TextField from "@material-ui/cor ...

javascriptcssreactjstypescriptmaterial-ui

What is the best method for securing my API key within the script.js file while utilizing dotenv?

My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...

javascripthtmlapiapi-keydotenv

Methods for incorporating rtl functionality into Angular Chosen

I am currently using Angular with Chosen (source) and I am attempting to implement right-to-left (RTL) support. Here is my demo, but despite referencing resources, I am encountering issues. The main problem arises when the body element has a dir="rtl" att ...

htmlcssangularjsjquery-chosenangular-chosen

Using setInterval on a batch of freshly generated div elements

I am interested in creating a small website where I can display multiple clocks for various time zones. However, I have encountered an issue with the setInterval function. Below is the code snippet: function addClock () { $("#container").append('& ...

javascripthtml

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

Utilizing Bootstrap for Centering Content Vertically and Horizontally

My login form is designed with a simple layout using Bootstrap 3.3.7 and a wrapper class div. However, when viewed on a full browser screen, the text boxes overlap the labels. How can I adjust it so that the default bootstrap behavior is applied to the for ...

htmlcsstwitter-bootstrap

Why do the back button and custom scroller behave differently on two different webpages?

I’ve added the malihu custom scroller to my website, but it’s behaving differently compared to how it works in the demo. I can’t seem to figure out what's causing this discrepancy. For reference: Demo: check here Website: visit here The fo ...

htmljquery-pluginsback-buttonscroller

Comment sections that refresh automatically after being posted

I am determined to provide a clear explanation. Despite having some code, I am uncertain about how to make it clone comments and add new ones with user inputted text. Below is the snippet of code I am struggling with: <!DOCTYPE html> <!-- this i ...

javascriptjqueryhtmldom