Is your floating action button malfunctioning?

Having an issue where clicking on a button should bring it to the top and float. The button is coming to the top but not floating. Any suggestions on how to solve this problem?

Here is the code:

<div class="create-course-info" id="scroll">
<a href="#" ><span class="count"><i class="fa fa-angle-up"></i></span>                                      
</a>
</div> 

And the CSS:

.create-course-info {
    position: relative;
    min-height: 50px;
    margin-bottom: 30px;
    padding: 10px;
}
.create-course-info .count {
    display: inline-block;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    float: right;
    border: 3px solid #37abf2;
    background-color: #eee;
    color: #666;
}
.fa-angle-up:before {
    content: "\f106";
}

As well as the script code:

<script type='text/javascript'>
    $(document).ready(function(){ 
        $(window).scroll(function(){ 
            if ($(this).scrollTop() > 100) { 
                $('#scroll').fadeIn(); 
            } else { 
                $('#scroll').fadeOut(); 
            } 
        }); 
        $('#scroll').click(function(){ 
            $("html, body").animate({ scrollTop: 0 }, 600); 
            return false; 
        }); 
    });
</script>

Answer №2

Not exactly sure what your intentions are with the float property, but I've provided a JSFIDDLE example below using your code. In this example, the position is set to fixed and the initial state of display is set to none.

Here is the JSFIDDLE link for reference

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

Extract the content from a <Span> element without specifying its ID

Is there a way to make it so that when a user clicks on an HTML tag, the text is copied to their clipboard? I also need to ensure that this functionality does not apply to a specific tag ID/name as I am unable to add those to my span. Is there a way to aut ...

Configure the asp.net page to display only once

Is there a way to configure an asp.net page to only display once? I want to ensure that if a user logs in again, they won't see the page again. ...

Is it possible for a browser to debug a JavaScript function automatically even if there are no errors present in the function?

While it's common knowledge that browsers can debug JavaScript functions that have errors, is there a way to debug a JavaScript function that doesn't have any errors? For instance, if I have a JavaScript function in my button control that runs wi ...

Using jQuery to toggle a class on the appropriate element

Currently trying to master jQuery, specifically toggleClass. Main Objective: Load a div with a fixed height and hide the overflow... by clicking an element, the full content of the div should be revealed. Similar to an accordion, but with the initial part ...

Develop a Cookie Banner using React JS combined with personalized CSS styles

Hey there, I'm diving into the world of React JS and finding the CSS aspect a bit challenging. Currently, I'm working on creating a simple cookie banner design and here's what I have so far: JavaScript: import React from "react"; ...

Mobile-friendly HTML email design featuring bottom navigation bar

Currently, I am in the process of coding a responsive email template. Here is what I have so far: Click here to view <tr class="main_nav"> <td id="mobile_nav" width="600"> <table cellpadding="0" cellspacing="0" width="100%"> ...

The issue with CKEDITOR is that it fails to send data through ajax upon the initial submission

When using CKEDITOR, I am experiencing an issue where my forms do not send data to the server on the first submit. If I click the submit button once, empty fields are sent without any input from me. However, when I submit the form a second time, only then ...

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

This strange error is puzzling because it appears on some of the webpages I create, but not on others, even though the elements are exactly the same. For instance, this issue does not occur: <main:uiInputBox onDarkBG="${hasDarkBG}" name="quest ...

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

When I added this code directly to my html file, it worked perfectly: <style type="text/css" media="screen"> #headerimg { display: block; background-image: url('/Content/images/epp/ebweblogo1.gif'); background- ...

Attempting to transfer a char pointer to the "QUERY_STRING" to a char array variable, but receiving an incorrect outcome

I'm currently working with FastCgi to create a dynamic HTML webpage. While I can easily retrieve the QUERY_STRING, I am facing difficulties in copying it into a char array. If there's a more efficient way to extract the value from QUERY_STRING, ...

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

The data from the Flickr API is consistently unchanging

I created a simple weather app that retrieves weather data using a "POST" request and displays it successfully. Users have the ability to search for weather by city, and I wanted to enhance the app by loading an image of that city through a separate jQuer ...

The Bootstrap menu seamlessly extends beyond the edge of the screen

Whenever I try to zoom in on my page, the navigation bar doesn't collapse as expected. Instead, it overflows off the page. This issue persists when viewing the website on mobile devices in landscape mode. Although I am using the jQuery mmenu plugin, ...

Is it possible to modify Bootstrap 4 variables using its own variables?

I am currently utilizing the latest Bootstrap 4 beta 2 and attempting to customize it by altering the variables to suit my preferences. Within my styles.scss file, I have included all necessary bootstrap imports: // Custom variables @import 'helpers ...

I am attempting to activate the "about us" button on the website. I have successfully included the path and added a router link to the containing div of the button. However, there seems to be something

In my app, the first step involves specifying the path in the routing module. Following that is defining the home component, then the app component, and finally creating the button using HTML. Setting up the path in the app.routing.module.ts file <div ...

IE Form SubmissionThe process of submitting a form in

My attempt to prevent form submission in IE 8 using jQuery 1.8.2 by using e.preventDefault(); is not working as expected. $(document).ready(function () { $("form").submit(function (e) { e.preventDefault(); $.ajax({ .... ...

What is the best way to retrieve data attributes from multiple div elements that share the same class name?

I have multiple div elements with the same class name. I want to extract the data attribute from these div's. I have tried some code and managed to get the result. However, I am unsure if this is the best approach for retrieving data("cartid"). Any as ...

Utilize playing cards as clickable options in Bootstrap 4

I am seeking a creative way to present a boolean selection for users in a card-style format. Despite my efforts, I have not been able to find a suitable solution on StackOverflow. I want to avoid using traditional radio buttons or any generic Bootstrap des ...

Tips for opening a new browser tab

I'm having trouble getting my code to open in a new browser tab. Can someone help me figure out what's wrong? function getWaterMeterList() { // alert("ON"); var BillingPeriod = $('#BillingPeriod').val(); $.ajax({ ur ...

How come the code functions when executed line by line, but fails to produce desired results when run as a complete script?

Whenever I try running this code in the Chrome Console, it results in an error Uncaught TypeError: Cannot read property 'playlist' of undefined var owner = "yamusic-trending" var kind = "1000" var url = `https://music.yandex.ru/handlers/pla ...