The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

I recently added a scroll-to-top arrow using Jquery, and it's functioning flawlessly. However, I encountered an issue when I set body and html to a height of 100%, as it mysteriously disappears.

View this fiddle for reference

The HTML structure is as follows:

<body>

    <main id="top">
        ........
        main content here
        ....
    </main>

    <!-- Scroll to top arrow -->
    <a href="#top" class="goto-top">Top</a>

</body>

CSS Styling

body, html {
    overflow-x: hidden;
    height: 100%; /* This line causing the issue */
}

main {
    height:100%;
    position: relative;
    overflow-y: auto;
}
.goto-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    bottom: 20px;
    right: 20px;
    position: fixed;
    border-radius:50%;
    overflow: hidden;
    white-space: nowrap;
    opacity:0;
    z-index:999;
    background:#CCCCCC;
    visibility: hidden;
    color:#111111;
}

Removing the 100% height from html and body resolves the issue. But I want to maintain them at 100%. Any suggestions on how to adjust the CSS for .goto-top, html, and body?

Note: The requirement is to keep body and html heights at 100%, not min-height.

javascriptjqueryhtmlcss

Answer №1

Make sure to eliminate overflow : hidden; from the body. Check out the code snippet below:

var offset = 300, /* visible when reach */
offset_opacity = 1200, /* opacity reduced when reach */
scroll_top_duration = 700,
$back_to_top = $('.goto-top');
    //hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('goto-is-visible') : $back_to_top.removeClass('goto-is-visible goto-fade-out');
if( $(this).scrollTop() > offset_opacity ) { 
$back_to_top.addClass('goto-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
 }, scroll_top_duration
);
});
body, html {
    height : 100%;
}

main {
    height:100%;
    position: relative;
    overflow-y: auto;
    height:2000px
}
.goto-top {
    display: inline-block;
height: 40px;
    width: 40px;
    bottom: 20px;
    right: 20px;
    position: fixed;
padding-top:11px;
text-align:center;
    border-radius:50%;
    overflow: hidden;
    white-space: nowrap;
    opacity:0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
       -moz-transition: opacity .3s 0s, visibility 0s .3s;
            transition: opacity .3s 0s, visibility 0s .3s;
    z-index:999;
background:#CCCCCC;
visibility: hidden;
color:#111111;}
.goto-top.goto-is-visible, .goto-top.goto-fade-out, .no-touch .goto-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
       -moz-transition: opacity .3s 0s, visibility 0s 0s;
            transition: opacity .3s 0s, visibility 0s 0s;}
.goto-top.goto-is-visible {
    visibility: visible;
    opacity: 1;}
.goto-top.goto-fade-out {
    opacity: .8;}
.no-touch .goto-top:hover,.goto-top:hover {
background:#FFFFFF}
.goto-top.goto-hide{
-webkit-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
visibility:hidden;}
@media only screen and (min-width: 768px) {
.goto-top {
    right: 40px;
    bottom: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="top">scroll below</main>

    <!-- goto top arrow -->
    <a href="#top" class="goto-top">Top</a>

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

React function causing website to freeze upon dispatch

I created a function in the child component to handle checkbox selection and trigger setDispatch(true). Unfortunately, whenever I check the checkbox, the website freezes and stops responding until I close and reopen it. Here is the function: const [ ...

javascriptreactjsreact-hooksnext.js

Ensuring nested JSON key existence before rendering in React

When retrieving data from MarvelAPI, there is no certainty that the key being accessed will be available. Therefore, I am implementing if statements to check each key before accessing them. The current code below appears quite messy. Is there a more effic ...

javascriptreactjsjsx

Dealing with the issue of asynchronous operations in a controller using async/await function

Something strange is happening here, even though I'm using async await: const Employee = require('../models/employee'); const employeeCtrl = {}; employeeCtrl.getEmployees = async (req, res) => { const employees = await Employee.find( ...

javascriptnode.jsexpressmongooseasync-await

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the i ...

javascriptvue.jsecmascript-6babeljsvuetify.js

Discover how to initiate an ajax request from a tailored module when the page is loaded in ActiveCollab

When trying to initiate an AJAX call on the project brief page by adding a JavaScript file, I encountered some issues. My goal is to display additional information along with the existing project brief. I included a JavaScript file in a custom module and f ...

javascriptajaxloadactivecollab

Displayed data from jQuery ajax reveals [object Object]

My AJAX call is quite simple, it alerts the data that the server has returned. $.ajax({ type: "POST", url: "/someform/act", //changed from utl to url data: { changed: JSON.stringify(plainData) }, //updated to include success: f ...

ajaxjquery

Contrast data from two arrays and create a fresh array

I have two arrays that may or may not share similar values const arrayOne = [orange, red, black, blue, yellow] const arrayTwo = [blue, purple, white, red] Working with react, I aim to use useEffect to identify and return the unique elements when a change ...

javascriptarraysreactjsreact-hooks

Top method for establishing a mysql connection in Express version 4

Recently, I installed node-mysql and started running on express 4. Although I'm new to express, I am eager to learn the best practices for handling database connections. In my current setup, I have app.js var mysql = require('mysql'); //se ...

javascriptmysqlnode.jsexpress

Issue with the style of the inline menu is not functioning properly in IE11

My menu with inline block links is working perfectly in all browsers except for IE11. In Chrome, it looks like this: https://i.sstatic.net/78EcQ.png In IE11, it looks like this: https://i.sstatic.net/HbPBt.png Here is the CSS code snippet: .rlist-- ...

htmlcss

Submitting a form without refreshing the page, displaying the output, reloading the form, and repeating the process. Wash,

There is a form on my page with dynamic drop-down options, an input box, and a submit button. To include this form on my page, I use the following code: <div id="dropdown"> <?php include("./listforward.php"); ?> </div> The listfo ...

phpjavascriptajaxformspartial-page-refresh

Sustaining the Status of a Changeable Form Element

To fulfill the requirement of constructing a Form Builder component that generates forms based on JSON data from the backend, I have identified 7 types of input fields that may be encountered: email password select file date input of type text input of ty ...

javascriptreactjsmaterial-ui

Website form phone number verification server

I am currently working on developing a website form where users can input their information, including their phone number. I am looking for a simple way to verify the user's phone number using PHP without the need for installation of SDKs or complex c ...

phphtmlwebsmsverification

Tips for executing getJSON requests one after the other

My goal is to showcase a weather forecast for a specific date on my website. Here are excerpts from the code I've used on a trial page that isn't functioning correctly: <script> function displayWeather(date){ $.getJSON(url + apiKey + "/" ...

javascriptjqueryjsonp

Unveiling Insights from a JSON File: Data Extraction

I have a JSON file named pio2.json that contains the following data: { "controles":[{ "chart":[{ "type":"columns", "title":"Pollitos" }], "datos":[{"key":"Math","value":98}, {"key":"Physics" ...

javascriptarraysjson

Changing the width of an HTML table does not produce any noticeable results

I attempted to create a striped table with 5 columns. The desired column sizes are: 10% width --- 10% width --- 40% width --- 20% width --- 20% width However, my current code is not achieving the correct widths (the 'description' column does n ...

phphtmlcss

Trying out the effectiveness of Ajax for email validation on a Rails platform

I am having trouble setting up jquery-rails in my Rails application to check if an email exists in the database. When I try to implement it, nothing happens as expected. Here is a snippet of my code: <%= form_for @user, :html => {:class => "col-m ...

jqueryruby-on-railsajax

What is the best way to simulate a CSS import for a jest/enzyme test?

I am facing an issue with mocking an imported CSS file in my jest/enzyme test: Header.test.js import React from 'react' import { shallow } from 'enzyme' import { Header } from './Header' jest.mock('semantic-ui-css/sema ...

javascriptreactjsunit-testingjestjsenzyme

Encountering issues with proper function of history.listen within React Router

I am struggling to get my function to work every time React detects a change in the URL. The history.listen method is not triggering (the console.log statement is not showing up). I have read that this issue may be related to using BrowserRouter, but when ...

javascriptreactjsreact-router

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

javascripthtmlnode.jsexpress

Having trouble with TypeScript error in React with Material-UI when trying to set up tabs?

I have developed my own custom accordion component hook, but I am encountering the following error export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>> Check ...

javascriptreactjstypescriptreact-hooksmaterial-ui