Navigate to the top of each element, unfortunately, the scrolling feature is malfunctioning

jQuery(".event_item .event_title").each(function(){
jQuery(this).click(function(){
    var checkElement = $(this).next();  

    if(checkElement.is(':visible')) {
        checkElement.parent().find(".event_content").slideDown().slideUp('normal');
    }

    if(!checkElement.is(':visible')) {
        $(".event_item .event_title").parent().find(".event_content").slideUp('normal');
        checkElement.parent().find(".event_content").slideDown('normal');
    }


    var elID = jQuery(this).parent().attr('id');
    var fId = '#'+ elID;
    scrollTo = $(fId);  
    jQuery('html, body').animate({scrollTop:jQuery(fId).position().top }, 500);
  });
  });

The scrolling behavior is not consistent. It works fine for the first item, but subsequent clicks do not scroll properly. I want each click to smoothly scroll to the top so that users can easily view the content they opened.

Here is my fiddle link

jqueryhtmlcssscroll

Answer №1

Your scroll animation triggered prematurely before the slide function completed. To fix this, make sure to initiate the scroll animation within the slide callback function.

if(checkElement.is(':visible')) {
        checkElement.parent().find(".event_content").slideDown().slideUp('normal',function(){
             scrollAfter(this);
        });
    }

    if(!checkElement.is(':visible')) {
        $(".event_item .event_title").parent().find(".event_content").slideUp('normal');
        checkElement.parent().find(".event_content").slideDown('normal',function(){
            scrollAfter(this);
        });
    }

For a solution, refer to this fiddle http://jsfiddle.net/dcy13sng/

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

Stopping halfway through a jQuery toggle width animation to close again

Perhaps the question may be a bit unclear, but allow me to provide an example. When repeatedly clicking the button that toggles the width, the div continues to animate long after the button press, which is not visually appealing. My desired outcome is for ...

javascripthtmljquerycss

Horizontal Scrollbar on the Top and Bottom

I've spent the last few days searching for a viable solution to this particular dilemma. Basically, I have a div that requires a secondary scroll bar at the top in order to facilitate horizontal scrolling without having to navigate all the way to the ...

javascriptjqueryhtmlcssscroll

Application of Customized Bootstrap CSS Not Successful

I have noticed that my custom CSS file does not override the bootstrap.min.css unless I include the !important tag in the class. Specifically, when I try to change the color of my background header. .bg-grey{ background-color:#333 !important; } The ...

htmlcssbootstrap-4

The textbox is unable to receive input from the pop-up window

Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...

phphtml

What methods can I use to identify the selector for this element?

After pinpointing the specific element in Google Chrome using inspect element, what kind of path or syntax should I use to apply a method to this element? The hierarchy for the element is outlined below: html body div#contentDiv div#searchFormDiv ...

csscss-selectors

The scrollbar is in view, but it remains stationary and does not allow the page to be scrolled

My current website has a design with 100% width, but I accidentally removed the scrollbar. After re-coding it back in, the scrollbar is visible but does not actually scroll down the page. Even though I have the CSS code and script in place, I seem to be mi ...

javascripthtmlcss

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...

htmlcss

Cycle through a selection and generate an HTML element for each individual item within the collection?

My Model(Objectives) stores the necessary data for iteration. Below is its code in models.py: class Objectives(models.Model): target = models.CharField(max_length=50) description = models.TextField(max_length=300) time_left= models.DateField() ...

htmldjangodjango-modelsdjango-views

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

javascripthtmlreactjsdom

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...

jqueryasp.netcss

Using the filter() function in jQuery allows for efficient sorting and

My current area of study is in jQuery, but I'm encountering a bit of confusion with the following code: var list = mylist.filter(function(f) { return $(f) .find('.anthing') .length > 0; }); I'm particularly puzz ...

javascriptjquery

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

javascripthtmlcssreactjsmaterial-ui

Issue with line wrapping due to padding-left in IE7

My <font> element is having line wrapping issues in IE7, where padding-left:30px; or margin-left:30px only affect the first line. Unfortunately, since it's a web-app, I can't replace the <font> element with something else like a div. ...

htmlcssinternet-explorer-7

Exploring the images in a continuous loop

Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, ...

javascriptjqueryhtmlcss

Height and placeholder issue with ion-searchbar

Hey there, I hope everything is going well for you. I've encountered a problem with the Ionic 5 - Angular Searchbar feature. This is how I added the searchbar: <ion-searchbar [(ngModel)]="text" (ionChange)="sear ...

cssangularionic-frameworksearchbar

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as t ...

javascriptjqueryhtmlcsswordpress

Using PHP to send a JSON request via cURL

I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...

phphtmljsoncurlheader

Is there a way to retrieve the original value of the substr value?

I successfully retrieved the correct value using the substr() method, but I am facing difficulty in getting back the original value. Can someone please guide me on how to achieve this? For example: "AAAAAA" -> AA... but I am unable to revert from AA.. ...

javascriptjqueryhtml

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

javascripthtmljquerycssmedia-queries