Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page.

Below is my existing code:

Jquery:

<div class="toTop">
Back to the top
</div>
<script>
  $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('.toTop').fadeIn();
    } else {
        $('.toTop').fadeOut();
    }
});
</script>

CSS:

.toTop {
    padding: 10px;
    background: rgb(55,161,222);
    color: #fff;
    position: fixed;
    bottom: 50%;
    right: 0px;
    display: none;
    z-index:1000;
    text-transform:uppercase;
    font-weight:600;
}

You can view the implementation here:

Answer №1

Avoid using the display:none property.

Adjust the position to right:-200px and implement .animate({ right: 0px }) instead of using .fadeIn(), and utilize .animate({ right: -200px }) instead of fadeOut().

Revise your conditional statement to

if ($(this).scrollTop() > 100)
. This is necessary because the scrollTop() function provides the current scroll position as a pixel value from the top of the page.

Answer №2

Swap out $('.toTop').fadeIn(); for

.animate({"right":"-50px"}, "slow");

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

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

Determine the active animation on an element using jQuery or JavaScript

Can you provide the code for the know_anim() function that can determine which animation is currently running on the '#div' element? Check out the jsFiddle link for reference:https://jsfiddle.net/himavicii/bL0nsjeL/ function moveLeft() ...

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

Arranging form elements and a map in a side-by-side layout using HTML5

How can I align the contents of a map and a form side by side with responsive design? I've attempted using tables and lists, but the form keeps appearing on top of the map. Ideally, I want the contents to be displayed side by side on wider screens and ...

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

Issues with ajax functionality

Utilizing Codeigniter When clicked ... .. insert some code.... $.ajax({ url: '<?php echo base _ url(); ?>locations/getmap', dataType: 'json', type: 'POST', data: location_data, success ...

Tips for stopping a click from going through a fixed element to the one in the background

My website features a fixed positioned header with a search box, overlaying content below it (thanks to the higher z-index). When I click on the search box, an event handler is triggered. However, the click response also passes through the header to the ...

Alert: Unresolved Promise Rejection Notification in the world of Express.js and Node.js!

Recently delving into the world of Node.js and Express.js, I've been attempting to incorporate the Shippo API into my E-commerce website. Unfortunately, I have encountered persistent errors that have proved challenging to troubleshoot despite numerous ...

Is it possible to incorporate Excel files into a web-based system that only supports HTML?

Currently, I am working on an HTML-based system where my supervisor has specified that only HTML can be used to keep things easy and simple. My question is: Can Excel files be added to the HTML-based system, and if so, is it possible to work with, save, a ...

Different methods for modifying the height of an Angular datatable in response to the data provided

Encountering an issue with adjusting the height of a datatable when calling a webservice to populate it. A webpage features a collapsible div element alongside a datatable. Upon collapsing the div, the table's height is calculated and resized using i ...

The div extends beyond its parent due to its height

This issue is concerning. https://i.stack.imgur.com/on8t9.jpg The border of the div extends beyond the red line. I have set this for body and html: html { height: 100%; } ::-webkit-scrollbar { width: 0px; background: transparent; /* make scrol ...

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

What is the process for retrieving the search function value in Node Js?

I have been working on creating a search bar functionality using the Express Framework in Node.JS, Handlebars, and MySQL. The connection to MySQL is all set up and functioning properly, I have installed body parser, and even tested the query directly in ph ...

Trouble with triggering HTML5 FileReader() functions

I'm having trouble determining why neither readSuccess() nor readFailure() are being executed in the code snippet below: function readMyFile(){ var reader = new FileReader(); reader.onload = readSuccess; reader.onerror = readFailure; ...

Steps to Retrieve a Textbox Value Using Jquery/JavaScript When the ID is Dynamically Generated Depending on a Condition

Struggling with a jQuery function to retrieve the value of a text box upon clicking a button in multiple rows. Can't seem to get it to work, any suggestions? Thanks in Advance. Text-box Code:- $('input.R_Insert').click(function() { var ...

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

What is the method to retrieve the value from $.get()?

After searching on stackoverflow, I was unable to locate a solution to my issue and am currently unable to comment for further assistance. The dilemma I face involves extracting a return value from an asynchronous method to pass it onto another function: ...

Creating HTML code using Django and JavaScript

Greetings world! I am relatively new to Python and JavaScript, so my coding techniques might seem unconventional to seasoned developers. However, I am eager to learn and improve. I have an HTML page where Django generates some code for a calendar: Here&a ...

Enhance Your Button with CSS3 Animation

While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surp ...