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
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 class="dialog-widget-content">
<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 class="e-form__buttons__wrapper__button-next">
click here
</div>