Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML.

Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positioned at the bottom but it's not centered horizontally or responsive in that direction.

If anyone could offer some guidance on how to fix this issue or let me know if I've started off on the wrong foot, I would greatly appreciate it!

Thanks in advance.

Below is the code snippet:

HTML:

<div class="content-1">
  <div id="to-first">
   <i class="fa fa-angle-down"></i>
  </div>
</div> 

CSS:

.content-1 {
  position: relative;
}

#to-first {
  position: absolute;
  margin-right: 50%;
  bottom: 10;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  display: none;
}

Javascript:

var main = function() {

$(document).ready(function() {
 $('#to-first').show(); 
});

$('#to-first').click(function() {
  $('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});    

};
$(document).ready(main);

And here is a jsfiddle link for reference:

https://jsfiddle.net/804jeg82/330/

Answer №1

Place your to-first element absolutely at the bottom of the content, making sure it has a width of 100%.

Make sure to specify a height for your content, as leaving it empty with an absolute element inside will result in unexpected behavior.

.content-1 {
    position: relative;
    height: 500px;
    border: 1px solid red;
}

#to-first {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  border: 1px solid green;
}
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-1">
  <div id="to-first">
<i class="fa fa-angle-down"></i>
  </div>
</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

The Ajax Form disappears from the page

After racking my brain for a while, I've come to the conclusion that it's time to seek some assistance. I have work tomorrow and I don't want to spend all night on this. The issue lies in my form which is located inside a modal, here is my ...

Troubleshooting my nodejs websocket chat for message sending glitches

The chat system is built on nodejs using websockets from socket.io library. While I have a client that also utilizes websockets from socket.io, I'm facing challenges in making the two communicate effectively. The issue seems to be with the client not ...

Transferring information between two separate components

Hey there, I'm struggling with the Payment Component. What I want to achieve is that when I click on a link, it transfers (ClassG, imageG, and PriceG) to the Payment Component where I can then style them accordingly. I've attempted something, but ...

Using Backbone to Handle Different Data Formats

I have a unique text file containing date-time data in the format below: 2014-03-14T16:32 2014-03-15T13:04 2014-03-16T06:44 ... I want to use this static file as a read-only data source for my backbone collection. However, the current format is not suita ...

What is the best way to send a JQuery variable using JSON.stringify and retrieve it on the server-side?

I need to pass the value in JSON.stringify and receive it on the Server side. Please note: When I attempt to pass the value directly without utilizing a JQuery variable, everything works smoothly. Without using a JQuery variable (it's functional) d ...

Determining if a div is scrolled to the bottom in ASP.NET

Seeking help as I am unsure how to tackle this task. My project involves using asp.net, where I have a div that has overflow:auto enabled to display terms and agreements. Additionally, there is an asp.net checkbox control with visibility set to "false". ...

In a Vue Application, the static HTML elements are loaded before fetching data

Utilizing VueJS and VueRouter in my application has presented a challenge. The issue lies in the fact that static HTML elements within the Vue Component load before the data is fetched, resulting in empty forms and tables being displayed initially. I have ...

Is it possible to identify horizontal scrolling without causing a reflow in the browser?

If you need to detect a browser scroll event on a specific element, you can use the following code: element.addEventListener('scroll', function (event) { // perform desired actions }); In order to distinguish between vertical and horizontal ...

What methods can be used to disable the back button functionality within an iframe?

I am facing an issue with embedding YouTube links on my webpage using iframes. When a user clicks on the link, it plays the video in the iframe. Below is the HTML and jQuery code I am using: HTML: <a href="http://www.youtube.com/embed/Q5im0Ssyyus"> ...

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

Creating a personalized aggregation function in a MySQL query

Presenting the data in tabular format: id | module_id | rating 1 | 421 | 3 2 | 421 | 5 3. | 5321 | 4 4 | 5321 | 5 5 | 5321 | 4 6 | 641 | 2 7 | ...

Issue with pagination and filtering in Smart-table.js

Presently, my focus is on developing functionality for Smart-table.js, which requires the following features: Retrieve JSON data from a web service Create a table with pagination and filtering capabilities Implement filters for individual columns or globa ...

Creating Scroll Animations in Javascript - Mastering scrollIntoView Animation

When I click on a div, I was only able to bring it into view with the scrollIntoView function. It functions correctly and meets my expectations, but I am curious if there is a way to animate it and slow down the process. I attempted a suggestion found her ...

Iterating through div elements and assigning unique ids to them before enabling click functionality

I'm attempting to create multiple div elements inside my loop that will each display a unique message when clicked. However, I'm encountering issues with the code and can't seem to make it work as intended. Here is what I am trying to achiev ...

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

How to select a button within a table using Selenium and C#?

I'm struggling with a section of HTML code. My goal is to use the selenium chrome driver in C# to navigate a website and create a ticket. However, I've encountered an issue where I need to select a tab to check some checkboxes, but all the tabs h ...

Guide on accessing text content from a sibling div element using jQuery

There are several divs arranged on a page as shown below. If a user clicks a link within the UL .list-links, I want to capture the content inside: <span class="asa_portlet_title">Title here</span> and store it in a variable. I have attempted ...

Adjust the image size using CSS within the containing outer div

I am trying to adjust the width of an image using css within typo3. Unfortunately, I only have access to the outer div container which is the custom border of the content element. To make the change, I added the following line to my css file: .Bild-Starts ...

Instruct npm to search for the package.json within a designated directory

Imagine having a folder structure that looks like this: root |-build |-package.json |-src |-foo |-foo.csproj |-foo.cs |-bar.cs |-bin |-... |-foo.sln Now, if you change the current directory to root\src\foo\bin a ...

Exploring Vue Components Through the Global Scope

Is it feasible to retrieve an instantiated Vue.js component object from the global JavaScript scope with Vue.js, or are these objects encapsulated within Vue's internals? For instance, when I have code defining a component like this: Vue.component(&a ...