CODEWITHSUNDEEP
javascriptjquerywordpress
DLMatthews
DLMatthews

Reputation: 11

How to add scrollto action in jQuery javascript statement for Wordpress website

I have a Wordpress website using the Divi Builder. I am using jQuery javascript to hide the bottom sections of the website until the visitor clicks on Learn More. This causes the Learn More text to disappear and the bottom sections to appear. However, I would like to add a ScrollTo action so it takes the visitor to the lower sections. I keep a bottom section visible, just empty for scrolling reference.

I have tried numerous various and cannot get the ScrollTo action to happen. It either breaks the script or ignores it. I made sure to turn on the alternative scrolling switch. If I try to use a standard anchor link "#target", it does this and ignores the jQuery script.

Here is the base script:

<script type="text/javascript">
 jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('#reveal_text').show();
jQuery('.rv_button').click(function(e){
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery("#reveal_text").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});

How can I add a ScrollTo action at the end of the script?

Upvotes: 0

Views: 45

Answers (1)

Arturas
Arturas

Reputation: 202

You need to call a callback function let's say after text appeared:

jQuery("#reveal_text").slideToggle(400, function() {
    jQuery([document.documentElement, document.body]).animate({
        scrollTop: $("#reveal_text").offset().top
    }, 2000);
});

Upvotes: 1

Related Questions