Button to return to top and footer placement

I recently added a "back-to-top" button to my website.

Here is the HTML:

<div class="scroll-top scroll-is-not-visible">
  <a href="#0"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
</div>
<footer class="site-footer">
 ...
</footer>

And here is the CSS:

.scroll-top{
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-is-not-visible{
  visibility: hidden
}
.scroll-is-visible{
  visibility: visible;
  opacity: 1;
}
.scroll-fade-out{
  opacity: .5;
}

Currently, the button overlaps the footer when I scroll down completely. I want the button to remain at a defined position when the footer is not in view, and move 50px above the footer when the footer becomes visible in the viewport. Essentially, I want the button to scroll with the content when the footer is in view.

If my explanation is unclear, please let me know.

Thank you!

javascriptjqueryhtmlcss

Answer №1

With the help of jQuery, you can pinpoint the exact moment during window scroll when a button hides the footer, and then use javascript/jquery to address this issue. I have provided an example here: http://codepen.io/babzcraig/pen/QNJrye for you to experiment with. The code might resemble the following:

HTML:

<div class="container">
  <h2>This is Your Content... bla bla bla<h2>
  <button id="btn">Click Me</button>
</div>
<div class = "footer">
  <p>This is Your Footer</p>
</div>

CSS:

.container {
  background-color: pink;
  height: 1000px;
  margin-bottom: 0px;
}

#btn {
  margin-left: 100px;
  width: 50px;
  height: 50px;
}

.footer {
  background-color: yellow;
  margin-top: 0px;
  height: 200px;
}

p {
  padding: 30px;
  font-family: roboto;
}

JS:

$(document).ready(function() {

  function getScroll() {
    var btnScroll = $(window).scrollTop();
    console.log(btnScroll);
    if (btnScroll < 450) {
      $("#btn").css({"position":"fixed","margin-top": "450px"})
    } else {
      $("#btn").animate({"position":"fixed","margin-top": "200px"}, 400)
    }

  }

  setInterval(function(){getScroll();}, 500);
});

Your values will vary depending on your specific layout, but by tweaking the numbers, you can determine what works best. In the else block, I used the .animate() method for a smoother transition instead of just a css declaration. Let me know if you find this helpful.

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

Error encountered: Scrollanimation IOS syntax error- Unexpected token '=.' an open parenthesis '(' was expected before a method's parameter list

Encountering an issue with the scroll animation on older IOS devices (2019 and older) - I receive the following error message: SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. class Event ...

javascript

Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

My response to a question about closures on SO included the following code sample: function Constructor() { var privateProperty = 'private'; var privateMethod = function(){ alert('called from public method'); }; ...

javascriptclosures

JavaScript XML Serialization: Transforming Data into Strings

When trying to consume XML in an Express server using express-xml-bodyparser, the resulting object is not very useful. This is the XML: <SubClass code="A07.0"/> <SubClass code="A07.1"/> <SubClass code="A07.2"/> <SubClass code="A07.3" ...

javascriptjsonxmlexpress

Combining two THREE.js scenes without erasing the first one

I'm facing an issue where I am attempting to overlay two scenes in my rendering process, but the second scene is completely removing the content of the first scene. Here is how my renderer is set up: this.renderer = new THREE.WebGLRenderer({ antia ...

javascriptthree.js

Accessing data with Ajax using functions outside of the Ajax function

Is there a way to access variable data from an external source in my code? Any assistance would be greatly appreciated. ...

jqueryajax

jQuery Mobile - Implementing Persistent Toolbars along with a custom back button functionality

UPDATE Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead. I am currently working on a project that includes a persistent header ...

htmlcsscordovajquery-mobilesingle-page-application

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

Issue of displaying buttons based on sibling's height under certain conditions

OBJECTIVE I have undertaken a project to enhance my skills in React and TypeScript by developing a UI chat interface. The design requirement is that when a chat message has enough vertical space, its action buttons should appear stacked vertically to the ...

javascriptreactjstypescriptreact-typescript

Exploring innovative designs for asynchronous JavaScript programming

Imagine you have an Express app and you need to retrieve data from a database to display on the frontend. There's a function in your code that looks like this (using node-mysql for handling database queries) exports.getData = function() { ...

javascriptnode.jsexpress

The issue of Access-Control-Allow-Origin restriction arises specifically when using the gmap elevation API

My attempts to retrieve the elevation of a site using latitude and longitude have been unsuccessful due to an error I encountered while making an ajax call. Regardless of whether I use HTTP or HTTPS, I receive the following error message: "No 'Access ...

javascriptjqueryangularjsajaxgoogle-maps

What could be causing the 400 error in my $http.post request?

I am relatively new to working with MEAN stack and I have encountered an issue that I hope someone can help me with. I am trying to implement functionality where an email is sent to a contact upon clicking a send button. I am using the SendGrid Nodejs API ...

javascriptangularjsnode.jsexpressmean-stack

The issue of JavaScript failing to connect to the HTML file

As I work on my basic HTML file to learn Javascript, I believed that the script was correctly written and placed. Nevertheless, upon loading the file in a browser, none of the script seems to be functioning. All of my javascript code is external. The follo ...

javascriptjqueryhtml

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Should I utilize a single form or one for each table row in asp.net mvc?

While working on a project, I caught myself in a coding dilemma: <table> <tr> <th>Code</th> <th>Enabled</th> <th>Percentage</th> <th>Amount</th> <th>Start&l ...

htmlasp.net-mvcstandards

Changing the Month Label Format from Short (MMM) to Long (MMMM) in Angular Material Datepicker

I am looking to customize the month labels in Angular Material datepicker. By default, the month view displays in MMM format and I want to change it to MMMM using custom MatDateFormats. export const APP_DATE_FORMATS: MatDateFormats = { parse: { dat ...

javascriptangularangular-materialmaterial-designmaterial-ui

What are the steps for combining AngularJS with Java JAAS authentication system?

My web application combines AngularJS on the frontend with Java on the backend. Angular communicates with the Java backend through Restful webservices exchanging JSON data over HTTP. I am in need of developing an authentication mechanism for this app and I ...

javascriptangularjssecurityweb.xmljaas

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

cssmaterial-ui

Presenting the correct error notification if the JSON data fails to load in an HTML webpage

Here is a sample JSON data: [ { "componentid": 4, "displayImageUrl": "https://via.placeholder.com/350x200", "title": "theme", "shortdesc": "to set theme for different applications" }, { "componentid": ...

javascripthtmljson

How can I display a nested dropdown list within a form using JSON data in React?

Utilizing material ui and formik, I have integrated a form that requires a selection box with nested options to be displayed as shown in the image linked here. (The value selected needs to be submitted upon form submission) https://i.sstatic.net/02AI2.png ...

javascriptjsonreactjsformsmaterial-ui

Using IF-ELSE statements in jQuery for DataTables

Is there a way to handle If else statements like method in the datatable plugin? Currently, when the 'data' variable returns a value, everything works correctly. However, if it is empty, I would like it to return either "from1" or "from2", which ...

javascriptjqueryjsonajaxdatatable