Page flickers when jQuery is used to scroll to an element

One issue I have encountered is with a link that, when clicked, should scroll down to a specific element on the page.

However, every time I test this feature, there seems to be an inconsistency where the page may momentarily flash before scrolling as intended.

This is the link in question:

<a id="continue_scroll" href="#welcome">Continue / Scroll</span></a>

The element to which it scrolls:

<h2 id="welcome">WELCOME</h2>

Here is the jQuery code used:

jQuery(function($){     
    $("#continue_scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#welcome").offset().top
        }, 2000);
    });   
});

Issue: The problem occurs when I refresh the page and click the continue link multiple times or intermittently click elsewhere on the page. This inconsistent behavior is quite frustrating.

Does anyone know what might be causing this issue and how it can be resolved?

jqueryhtmlcss

Answer №1

To avoid the anchor's default action (which is to instantly jump to the href'ed element), you can use jQuery to prevent it and smoothly scroll instead:

jQuery(function($){     
    $("#continue_scroll").click(function(e) { <!-- add a reference to the event here -->
        e.preventDefault(); <!-- prevent the default action of the event -->
        $('html, body').animate({
            scrollTop: $("#welcome").offset().top
        }, 2000);
    });   
});

The brief flash you may notice is the page quickly scrolling to #welcome before jQuery intervenes to smoothly scroll to the element with an animation.

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

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

javascripthtmlcssaudio

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this. Below is an example of my controller: public function index(Request $request) { ...

javascriptjquerylaraveltypescript

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

htmlcsstwitter-bootstrapresponsive-designnavbar

Can I extract JSON data from the AJAX response?

When receiving JSON data, such as in the example below, it is often necessary to separate each value into individual variables: var reviewDate ='2015-06-01T05:00:00Z' var developers ='Ankur Shah,Srikanth Vadlakonda,Tony Liu, Qiuming Jie&ap ...

javascriptjqueryajaxjson

Border extends across two separate rows

Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan: <table border="1" style="width:300px"> <tr> <td rowspan="2">Family</td> <td id="jill">Jill</td> <td>Smi ...

htmlcss

2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names? For Instance: When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names! <a class="type1" href="#">te ...

htmlcss

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

javascriptcssreactjssassstyling

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...

javascripthtmlcss

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Is it feasible to exclude certain CSS files in an HTML Master page within the .NET framework?

On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...

javascripthtml.netcss

Different methods of displaying the next image from a URL without explicitly setting the dimensions

I am attempting to display an image in Next.js without specifying the width and height by using import Image from 'next/image';. It should be noted that the image is sourced from a URL, not a specific folder within the project. <Image si ...

javascriptcssreactjsimagenext.js

Tips for maintaining the active tab after a page refresh by utilizing the hash in the URL

I came across this code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1c1a0918285d465a465b">[email protected]</a>/dist/css/bootstrap.min.css" ...

javascriptjquerybootstrap-5

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this? #clockPosition { margin: auto auto 0 auto ...

htmlcss

The number of TH elements does not match the number of columns in the table

Is there a way to make only one th span the full width of the table, even with 5 columns below? I want to color the background of the th to cover the entire width. However, since the rest of the table contains 5 columns, the single th only stretches acros ...

htmlcsshtml-table

Create an interactive JSON tree structure

I am looking to create a JSON tree from an array. My array is structured like this: var arraySource = []; arraySource.push({key : "fr", value: "france"}); arraySource.push({key : "es", value: "spain"}); //... console.debug(arraySource); The desired JSON ...

javascriptjqueryarraysjson

Modifying Font Style in Angular 4 Material

Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...

cssangularmaterial-design

Trying to access a jQuery variable outside of the success function results in a null value

I have been researching this issue in various forums, but I haven't been able to successfully apply the code provided by other tech experts. My problem lies in accessing a variable inside a jQuery success function, which currently throws null due to b ...

jqueryajax

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

htmlangulartypescript

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

htmlcssparallax

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...

javascriptcsshtml