How can I automatically scroll to an anchor element once CSS animation has finished

I am currently working on a CSS animation that looks like this:

@-webkit-keyframes flip {
0% {opacity:1;}
100% {opacity: 0;} //This could be 90%
//And here could be frame for 100% which would scroll it down.
}

#headercover {
    -webkit-animation-name:flip;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:1;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;

After the last frame of the animation, I want the page to automatically scroll down to an anchor point. However, I am not very familiar with jQuery or JavaScript. Can anyone provide assistance?

To view the current site in progress, click HERE

Answer №1


  setTimeout(function(){
      $('html, body').animate({
          scrollTop: $("#scrollToElementID").offset().top
      }, 2000);
  }, 3000); // delay by 3000 milliseconds 

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

JavaScript prototypal inheritance concept

During my free time, I like to dabble in JavaScript, but I’m currently struggling with this particular topic. var person = new Person("Bob", "Smith", 52); var teacher = new Teacher("Adam", "Greff", 209); function Humans(firstName, lastName) { this. ...

Explain the process of data binding with DOM elements

I'm intrigued by how jQuery has the ability to link arbitrary data with any DOM element without the use of HTML data attributes. $('#div_id').data('suffix', (count++)); In the Firebug HTML snapshot, I don't see any data attr ...

Handle Ajax requests to prevent multiple submissions upon clicking

Seeking a solution to avoid multiple requests when the user clicks on the login or register button. The code provided below is not functioning as expected; it works fine the first time but then returns false. $('#do-login').click(function(e) { ...

Changing the Color Scheme of Twitter BootstrapRevamping the Color Palette

I am interested in updating the color scheme of a website that I modeled after this example: http://getbootstrap.com/examples/navbar/ So far, I have successfully changed the background color of the entire page using: body{background-color:#XXXXXX} Howev ...

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to di ...

Error: The "render" method is not available for the IncomingMessage object

While working on a basic application using node.js and express, everything seems to be in order except for this error that keeps popping up: res.render("aggregatedCostList",{ ^ TypeError: Object #<IncomingMessage> has no method 'render&ap ...

How to round whole numbers to whole numbers using JavaScript?

Looking to manipulate some numbers in JavaScript. Let's say we have x = 320232, y = 2301, and z = 12020305. The goal is to round these numbers to the nearest tens, hundreds, or thousands place. Thus, we want them to become x = 320000, y = 2300, and z ...

Leveraging Modernizr for identifying drag and drop functionalities

On my website, there is a section that requires drag and drop functionality in HTML5. I want to inform users on the homepage if their browser supports this feature. Despite attempting to use Modernizr, I have not been successful. I generated a custom file ...

What's the best way to align three images in a row?

I am having trouble centering three social media icons next to each other. I can't seem to figure out the proper way to do it. https://i.stack.imgur.com/Zf5p9.png <div class="maintext flipInX animated"> <div class="socials wow bounce an ...

Begin counting starting from 1 all the way up to 24, then feel free

I've developed a counter that increments from 0 to 24, and once it reaches 24: setInterval(function(){DayAndNight()}, 1000); var iState = 12; function DayAndNight() { //console.log('test'); switch(iState) ...

Currently, I am attempting to implement password strength validation using Angular

Looking for a way to implement password strength validation in Angular? You may encounter an error message like this: NullInjectorError: No provider for password strength! in the passwordstrength.ts file HTML <div class="validation_errors t ...

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

Challenge encountered with asynchronous angular queries

Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...

Exploring PHP Directories

I am currently working on developing a small PHP Filebrowser This code snippet displays my files when the page loads. $dir = './files'; $directories = array(); $files_list = array(); $files = scandir($dir); foreach($files as $file){ if(($fi ...

Store data in Laravel's storage directory

I encountered an issue while trying to save files to the storage folder in Laravel after deploying the project on a web server (byethost7.com). The files were only being stored in the public folder. I ran the following command in the command prompt: >p ...

Knockout.js dropdown pre-selection in nested JavaScript objects is functioning smoothly in KO 2x versions, but there seems to be a compatibility issue with KO 3x versions

This is a sample data that will be loaded from the server in JSON format and constructed into the below object graph. It consists of an array of "Choice" objects, each with properties like id, name, stages, & currentStageId. The "stages" property in th ...

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

Select2 Bootstrap - Preselecting Options

I am currently utilizing Bootstrap Multiselect but I am encountering some difficulties setting the default value for the multiselect as per the documentation provided. Inside a function, I have tried the following: $("#selector").multiselect("select", ["V ...

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...