jQuery scrollTop animates to the start of the webpage

Upon loading the page, the div appears at the top of the screen but then jumps to its correct position once scrolling begins.

To view the website, click on this link: calretirement.com/classes-test.php

CSS:

 .register{position:fixed !important; bottom:120px !important;   width: 340.453px;
  margin-top: 29px;
  }

  #stickyForm2015 {-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

jQuery:

    <script>
    $(window).scroll(function(){
        if
      ($(window).scrollTop() > 670){
          $("#stickyForm2015").addClass("register");

        }


        else
        {
            $("#stickyForm2015").removeClass("register");
            updateSliderMargin();
        }


    });
</script>

<script>
    $(window).on("scroll", function(){
        if
      ($(window).scrollTop() > 2500){

            $("#stickyForm2015").removeClass("register");
            updateSliderMargin();
        }


    });
</script>

Welcome any suggestions and assistance!

Answer №1

To implement a scroll animation using jQuery, you can simply use the following code:

$('html, body').animate({scrollTop: '0'}, 400);

If you prefer to animate with CSS, make sure that your classes are properly set up for the animation effect.

.original-class{
    position: relative;
    top: 500px;
    transition: top .4s ease-in-out; // This is only required if you intend to animate back
}

.animate-original-class{
    top: 0;
    transition: top .4s ease-in-out;
}

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

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

JSON parsing error within the HTML Sidebar list

I have a JSON file that contains data I need to parse in order to display information in my sidebar. When a user clicks the button labeled "List all sessions", the goal is to showcase all of the available session details grouped by Session ID and location. ...

Creating URLs dynamically in jQuery ajax

$(document).ready(function () { $(".linkDelete").click(function () { var userid = $(this).attr("id"); console.debug("saurabh userid", userid); var url = "/delete?id=" + userid; var s = "SpringHibernateAnnotations"; ...

Encountering some difficulties while setting up my development tool (specifically webpack)

I have embarked on a journey to learn modern JavaScript with the help of Webpack and Babel. As a beginner in this field, my instructor is guiding me through the principles of modern JavaScript by building an app called Forkify - a recipe application. While ...

Guide to aligning 2 divs side by side using bootstrap

I have been experimenting with different methods like col-xs-6 for the first child, but I can't seem to get it right. How can I achieve this layout using only Bootstrap? Despite trying col-xs-6, I still haven't been able to place these divs next ...

The content of XMLHttpRequest is accessible via the property response

Typically, when we want to retrieve data using AJAX, we would use code like this: var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ elem.innerHTML = xhr.responseText; ...

Utilize the capabilities of the Dropbox Core API in Javascript to effortlessly transfer and store files on

I am currently developing a chrome-extension that has the ability to upload files to the user's Dropbox folder. I have implemented AJAX requests in my code to handle file uploads, and it is working fine for text-based file extensions such as .txt, .js ...

Prevent validation on a particular input field with JQuery validator and Bootstrap

Is there a way to use JQuery validator to validate an entire form except for a specific input? Here is an example code snippet showing how this can be done: jQuery.validator.setDefaults({ debug: true, success: "valid" }); ...

Having trouble with Twitter Api version 1.1?

I am facing an issue when trying to display my latest Tweets on my website. Even though everything is working fine on the tweet_json.php, I keep getting the following error when attempting to display them on my site: ReferenceError: listTweets is not defi ...

Express: adding a question mark to the URL when submitting the form

Upon submitting a form with a "?" in the URL, I noticed that when posting it redirects me to the page and still returns a "?" in the URL. Directory: server.js, index.html, package.json, package-lock, src/models/form.js server.js: const express = require( ...

Troubleshooting jQuery Delegation Issues

I am facing a challenge with making the vote click function work properly after loading data via an Ajax call into #existingComments. The Ajax call works fine and displays the results correctly, but I need to figure out how to enable the vote click functio ...

Is it possible to incorporate shadows on a pie chart using recharts?

Does anyone know how to enhance a pie chart with shadows using the recharts library? https://i.sstatic.net/JLGVF.png https://i.sstatic.net/f5qv4.png If you have any solutions, please share. Thank you! ...

It can be frustrating to have to refresh the page twice in order to see changes when utilizing the revalidate feature in Next

When I make the REST call to fetch data for my page using the code below: // src/app/page.js const Home = async () => { const globalData = await getGlobalData(); return ( <main'> <SomeComponent data={globalData} /> < ...

Guide to creating a new window without a menu bar for an onclick function in electronJS

After trying to remove the menu bar from the main window using win.setMenu(null) in the main.js file, I encountered a new issue. When opening a new window (referred to as the "add items window"), I struggled to find a way to hide the menu bar in it as well ...

Is there a more concise method for accepting a collection of interfaces in TypeScript?

Issue I am facing a simplified version of a problem with my model: Here is how my model currently looks: interface Instrument { name: string; // ...more properties shared by all instruments... } interface Guitar extends Instrument { type: &q ...

Error in the Syntax of Project Image Slider

I'm encountering an issue with a WordPress script called Project Slides. Initially, this script was working fine but suddenly stopped. After investigating in the console, I found the following error: VM138 plupload-image.js?ver=4.2.2:67 Uncaught Err ...

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

"Enhance your webpage with a captivating opaque background image using Bootstrap

I'm new to exploring Bootstrap and I am currently experimenting with options for displaying content with a semi-transparent background image. Currently, I am using a "well" but I am open to other suggestions. I have managed to place the image inside t ...

What is the best way to reduce the size of a Base64/Binary image in Angular6

I utilized the Ngx-Webcam tool to capture images from my camera. My goal is to obtain both high quality and low quality images from the camera. Although this library provides me with Base64 images, it offers an option to reduce the size using imageQuality ...

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...