What is the best way to position a scroll down button in the center of a divided screen window?

This split screen design resembles the layout presented in this example: http://codepen.io/rileyjshaw/pen/vGLvVo

I am looking to incorporate a scroll down button on this layout. How can I position this button at the center and bottom of the window?

Below is the HTML code snippet:

.half
    p These panels consistently divide the window correctly.
.half
    p
        | Created using only CSS with just 5 rules.
        span.social
            | by  
            a[target='_blank' href='https://twitter.com/rileyjshaw'] rileyjshaw
            |.

CSS:

// Maximum aspect ratio before switching to a vertical split.
$ASPECT_W: 4
$ASPECT_H: 3

// Complete solution:
body
    display: flex
    flex-wrap: wrap

.half
    width: 100%
    flex-basis: $ASPECT_W / ($ASPECT_W + $ASPECT_H) * 100vh
    flex-grow: 1


// Additional styling for visual appeal:


html, body
    height: 100%
    width: 100%
    margin: 0

.half
    position: relative
    font: 600 32px Poppins, sans-serif
    color: #f6e8ea
    background: #ef626c
    + .half
        background: #84dcff

p
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 72%
    margin: 0
    text-align: center

.social
    display: block
    max-height: 0
    opacity: 0
    animation: appear 1s 4s

a
    color: #f9eef0

@keyframes appear
    50%
        max-height: 2em
        opacity: 0
    100%
        max-height: 2em


opacity: 1
htmlcssfrontend

Answer №1

To address your issue, one potential solution is to create a div with absolute positioning. This can then be aligned to both the center and bottom of the page. Below is an example of HTML and CSS utilizing this method from a codepen demonstration: http://codepen.io/tcaer/pen/xOpjBB

HTML:

<div class="button"></div>

CSS:

 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 bottom: 100px;

If you need to use position: absolute within another div, simply apply position: relative to the parent container.

Answer №2

I recently had a task where I needed to add a scroll_down icon in the middle of the screen and have it automatically scroll down to the next section when clicked.

Here's the CSS code:

.scrolldown{
    position: absolute;
    z-index: 2;
    left: 45%;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0%;

}

And here's the HTML code:

<div class="scrolldown">
  <a href="#sectionId"><img src="images/scroll_down_homepage.gif" /></a>
</div>

<section id="sectionId">
//Content
</section>

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

Arranging a pair of buttons from separate forms to be perfectly aligned on the same line

I have a page called edit.ejs for editing camps. This page contains two forms, one for submitting edits and the other for deleting the camp. Each form has a button, and they are currently displayed below each other. How can I align the buttons so that they ...

htmlcssejsbootstrap-5

How to create HTML buttons with CSS that maintain proper proportions?

How can I ensure that my HTML buttons adjust proportionally to different screen sizes? I've been working on coding an Android app using HTML and CSS, and everything seems to be running smoothly. However, when I share the file with a friend, he compla ...

androidhtmlcssandroid-layoutmobile

The video continues playing even after closing the modal box

I am facing an issue with my code where a video continues to play in the background even after I close the modal. Here is the code snippet: <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria- ...

javascripthtmljquerycss

using CSS to create responsive designs with multiple divs

After spending hours searching, I am still struggling to get two divs to sit next to each other at 50% width each, with a third div below that spans 100% width. The challenge is to make the layout responsive, so that when the screen size is reduced to arou ...

csshtml

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Is it possible to adjust the background size using jQuery?

When attempting to set backgroundSize with jQuery using the code provided, I consistently encounter an error on the fourth line: "unexpected identifier." bigwidth = 200; bigheight = 100; $(e.target).css({backgroundImage: 'url(' + ...

jquerycss

Adjust Bootstrap form positioning to be fixed at the bottom of the page

Can anyone provide assistance with positioning this form at the bottom of the page? <form> <div class="form-group"> <input type="email" class="form-control" id="" aria-describedby="emailHelp" placeholder="Enter email"> &l ...

htmlcssbootstrap-4

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

Align the child element to the baseline and have it aligned to the right within an `<li>` list item

I am interested in aligning the price of coffee to the right end of the coffee name. For example, the price 1.80 should be in line with Americano and 10.00 should be in line with Macchiato. https://i.sstatic.net/unm26.jpg ul { list-style: none; pad ...

htmlcssposition

Differences in <img> sizing behavior between Chrome and Firefox

Objective: Develop a scrollable image-gallery web component with layouting that functions without script intervention. Specifications: The size of the web component must be fully responsive and/or adjustable. The top main area of the widget is the galle ...

cssimageflexboxgalleryimage-size

Vertical centering menu adjustment

Can anyone help me with centering an image on my website? I've tried the following code: top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); You can see what's happening on my site here: ...

htmlioscss

Angular ng-repeat failing to display data as expected

I've been attempting to create a table from a JSON structure, but I'm having trouble getting it to display correctly. The output is not appearing as expected for the first two cells; "Partial" is empty and only filling the last one. You can see ...

javascripthtmlangularjsjsonangularjs-ng-repeat

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

URL specifically for an embedded iframe

My organization's local website features a variety of link buttons on the index.php page, all of which open within an iframe on the same index page. When the index page loads, the iframe displays the 'home.php' page. Now, I am trying to prov ...

phphtmliframe

Update the DIV element's class to reflect whether the quiz answer provided is correct or incorrect

I am facing a challenge while attempting to assign a CSS class to a dynamically created element in JavaScript. The error I'm encountering pertains to the reference issue with the trackerMarker element within the event listener functionality. Although ...

javascripthtml

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

javascriptphphtml

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

I'm encountering an issue with the Jquery Event Handler ".on()". On my home page, I have a Favorite button on each post. If the post has not been favorited: li appears inactive Event 1 is triggered If the post has been favorited: li appears act ...

javascriptjqueryhtml

Discovering with jQuery

Can we actually change the background color of '.preview-inner' to yellow from "#change_color"? <div id = "form-container> <input class="color-picker" id="change_color" type="text"> <div class="replacer"> <div class= ...

jqueryhtml