Fade in/fade out effect not appearing for scroll to top button

Seeking help with creating a scroll to top button that fades in when the user scrolls down.

I've successfully positioned the button and made it scroll to the top when clicked. However, the button remains visible at all times without any fading effects.

Here is my current setup:

HTML

 <a class="scrollup" href="#">Scroll To Top</a>

This HTML code is placed within a paragraph inside a div element.

Javascript

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 100) {
        jQuery('.scrollup').fadeIn();
    } else {
        jQuery('.scrollup').fadeOut();
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

CSS

.scrollup {
height: 50px;
width: 50px;
opacity:1.0;
padding:10px;
text-align:center;
background: #FFFFFF;
font-weight:bold;
color:#444;
text-decoration:none;
position:fixed;
top:75px;
right:40px;
}

The issue I'm facing is that the button does not fade in as I scroll or fade out when I click on it to go to the top of the page.

Your assistance in resolving this matter would be greatly appreciated. Thank you.

jqueryhtmlcss

Answer №1

Consider improving your code like this:

See Demo Here

Styling in CSS

.scrollup {
    height: 50px;
    width: 50px;
    opacity:0;
    padding:10px;
    text-align:center;
    background: #FFFFFF;
    font-weight:bold;
    color:#444;
    text-decoration:none;
    position:fixed;
    top:75px;
    right:40px;
    transition:opacity 1s ease-in;
}
.scrollup.visible {
    opacity:1;
}

Using jQuery

jQuery(document).ready(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').addClass('visible');
        } else {
            jQuery('.scrollup').removeClass('visible');
        }
    });
    // Smooth scroll to the top
    jQuery('.scrollup').click(function () {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});

Answer №2

To hide the '.scrollup' element, you should set its display property to none.
Here is an example of how your CSS code can be structured: 

.scrollup {
    height: 50px;
    width: 50px;
    opacity:1.0;
    padding:10px;
    text-align:center;
    background: #FFFFFF;
    font-weight:bold;
    color:#444;
    text-decoration:none;
    position:fixed;
    top:75px;
    right:40px;
}

For the script part, you can use the following implementation: 

jQuery(document).ready(function($){

    jQuery(window).scroll(function() {

        if(jQuery(this).scrollTop() != 0) {
            jQuery(".scrollup").fadeIn("slow");    
        }

        else {
            jQuery(".scrollup").fadeOut("slow");
        }

    });

Answer №3

It appears that certain parameters have been overlooked.

var fadeInTime = 400; //adjust the speed of button fade in 
var fadeOutTime = 400; //adjust the speed of button fade out

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 300) {
        jQuery('.scrollup').fadeIn(fadeInTime);
    } else {
        jQuery('.scrollup').fadeOut(fadeOutTime);
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

I have also modified the condition to if (jQuery(this).scrollTop() > 300) { Feel free to revert it back to 100 if needed.

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

Creating an arrow line with CSS styling can be achieved easily

In order to create a horizontal line with a breakdown in the middle that displays an arrow, I want to use only HTML and CSS without relying on bitmap images. If needed, Font Awesome can be used to achieve the desired result. It's important for me to h ...

htmlcsscss-shapes

Having trouble getting the reset select function to work

I'm in the process of developing a website where I'm facing an issue with resetting my form that is constructed using jQuery Uniform. Despite my efforts, I am unable to successfully reset it. Below is the header code snippet: $j(function() { ...

jqueryformsselectresetuniform

Is my code incorrect, or is JQUERY failing to load correctly?

I'm currently experimenting with jQuery methods for ajax in order to create a dropdown menu. Below is the jQuery code I am using: JAVASCRIPT: <SCRIPT> $("select[name='carid']").on("change", function() { $.post( ...

javascriptphpjqueryhtmlajax

Adjusting the dimensions of the image carousel

Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...

jquerycssrazorbootstrap-4

Best Practices for Implementing the 960 CSS Clear Class

I'm puzzled by the necessity of using the clear class in the 960 css framework. Every time I remove a div with the clear class, everything seems to function properly. Can you explain to me the significance and purpose behind this class? ...

cssframeworks960.gs

Refresh the DOM window to load the updated PHP element

I have a dilemma with two separate playlists in a PHP file, each corresponding to a button labeled playlist1 and playlist2. <div class="player"> <?php include ('playlist1.php');?> <?php include ('playlist2.php'); ...

javascriptphpjquery

What is Reddit's approach to creating a login/signup modal?

Attempting to create a modal similar to the one on Reddit, I am puzzled about how they achieve the following: Scroll is disabled when the modal is open Scroll is enabled when the window is smaller than the modal I have experimented with various CSS ...

javascripthtmlcss

What is the method for accessing meta tags from the current webpage in PHP?

I have added the meta tags in the head section of my website: <meta name="image" content="image url" /> <meta name="title" content="Page title" /> Next, I attempted to extract the URL and meta tags using the following code: $url='http:/ ...

phphtml

Determining the Height of a Document Using JavaScript

In my website development process, I have implemented JQuery to style the pages and calculate property values using numbers from javascript functions like window.innerHeight. Everything is functioning well so far. However, I am currently facing a challenge ...

javascriptjquerycss

Incorporating CSS style to individual rows in an HTML table

Is there a way to determine if a specific string, such as 'LA DEFENSE', is present in my HTML table and then change the background color of that line to red? https://i.sstatic.net/Yq7qF.png This is what I am looking for: $("#colorline").click( ...

javascripthtmlcss

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

cssnext.jstailwind-css

How can one retrieve the values of a row in an el-table in Django after clicking on it?

I developed a Django table where clicking on a row should send the corresponding records to the function "medicineRequestSelect" in view_doctor.py. Unfortunately, I am encountering issues extracting the values from that specific row as depicted in Image 1, ...

pythonhtmldjangodatabaseelement-ui

Order of execution for actions

I find myself in a peculiar situation that is quite challenging to articulate, but I will do my best to explain. The user interface (UI) I am working with consists of 4 navigation <a> buttons at the top, always displaying a form in the center, and P ...

javascriptc#jqueryasp.net-mvcmodel-view-controller

Arabic text spread across multiple lines within the queryString

When attempting to call an ASP.NET page from JavaScript with a query string containing Arabic text, I encounter an error when the code is live online but it runs smoothly on the local server. The issue seems to arise when the Arabic text spans multiple l ...

javascriptjqueryasp.net-mvc

How can we incorporate radio buttons within an HTML table?

Despite my efforts to find a solution, I'm struggling with a seemingly basic issue. I have a table named Off that stores all staff holidays. However, before granting a day off to a staff member, it must be authorized. I've created a query to retr ...

phphtmlmysqlradio-button

While holding down and moving one div, have another div seamlessly glide alongside it

I have a scenario where two divs are located in separate containers. My goal is to drag div2 in container2 while moving div1 in container1. The 'left' property for both divs should remain the same at all times. I can currently drag each div indi ...

javascriptjquerycssjquery-uijquery-ui-draggable

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Reformatting Arrays

I'm working with a two-dimensional array that looks like this: [["a",1], ["b",2]] My goal is to transform it into this format: {"a":1,"b":2} Any tips on how I can achieve this? Apologies if it's a simple or silly question. ...

jqueryarraysformatting

Positioning React Material UI Grid items dynamically on either side of the screen based on conditions

I am currently working on a chatbot project using React and Material UI. I have encountered an issue with the Grid component in my application. My goal is to align the bot messages to the left side of the screen, while positioning the user messages on the ...

javascriptcssreactjsmaterial-ui

The function is not defined... HOWEVER... it functions perfectly in a separate demo file

I have been attempting to implement a similar effect found here: . It's a responsive popup that can display content on demand. Initially, I have jquery 2.0.2 and jquery-ui included in my <head> section, which are loading successfully. Then ...

jqueryhtmlfunctionundefined