Home > other >  Scroll to the top of modal window on button click
Scroll to the top of modal window on button click

Time:04-15

I'm building a site on Wordpress using Elementor page builder, and I'm having trouble sending the user back to the top of a modal when clicking 'next' on a form.

Here's the code I've been trying, and here's the page it's currently hosted: http://doortouk-co-uk.stackstaging.com/home/

(The modal can be opened by clicking the 'Apply Now' button at the bottom of the page, section 3, 4 and 5 have the longer sections that require the scroll to top functionality)

jQuery(document).ready(function () {
    jQuery('.e-form__buttons__wrapper__button-next').click(function(){
        jQuery(".dialog-widget-content").scrollTop(0);
        });
 })

Any help would be appreciated!

Edit - the solution was to target .dialog-lightbox-message

CodePudding user response:

Took the effort to look at your website and find the issue. But for the next time, it would be great if you make a code snippet we can use to help you. Anyway, cheers and enjoy!

I made a snippet to double check if what I was doing was correct. The thing you need would be: jQuery(".dialog-widget-content").animate({ scrollTop: $(".dialog-widget-content")}, 0);

PS, run code snippet below. ;)

$('.e-form__buttons__wrapper__button-next').click(function(e){
  jQuery(".dialog-widget-content").animate({ scrollTop: $(".dialog-widget-content")}, 0);
});
.dialog-widget-content {
  width:400px;
  height:400px;
  overflow:auto;
  float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<br/><br/>Scroll down & then click there >><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div >
click here
</div>

  • Related