Question posted in
The full documentation can be found here.

Divi theme – How can I link an image in Revolution Slider to a div id on the same page with smooth scroll?

I’ve figured out how to give an image in Revolution Slider an id, or a class. So I gave an image a class, and then linked it to a section on the same page. However, it’s so jerky, and it just jumps to the section.

I added some jQuery to smooth the transition, but it’s not working. I’m getting the error:
“Uncaught SyntaxError: Unexpected identifier”

It seems to be referring to the class that I gave the image in Revolution Slider, but I don’t understand why there’s an error. I just want the user to be smoothly guided to the next section on the page. Here’s my jQuery:

(function($)

$(".click-to-scroll").click(function() {
    $('html, body').animate({
        scrollTop: $("#top-home").offset().top
    }, 1000);
});

(jQuery);

I’m using the Divi theme, which allows you to put JavaScript into the header section of the website in the theme options from the dashboard. The website is here: customdesign.mgsites.net

Any help would be greatly appreciated. Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So after a lot of tweaking, I found out that the reason I was having issues is because the revolution slider loads outside of the DOM, after everything else. So I added a document ready function, to make sure that the jQuery was being called (it looked like it was being ignored). It now works, so if anyone runs into this issue again, this is the code you'll need.

    <script>
jQuery( document ).ready(function() {
    jQuery(".click-to-scroll").on("click", "*", function() {
        jQuery("html, body").animate({ scrollTop: jQuery('#top-home').offset().top }, "slow");
        return false;
    });
});
</script>

    I put this in the header of the home page only. I used a plugin called Header/Footer scripts that allows you to drop code directly into the header of a single post/page, or in every post/page. Also, note that it's wrapped in tags, because any kind of code can go in here, so I have to specify that it's a script and not meta, comments, etc.


  2. 0

    The correct syntax is this:

    (function($) {
    $(".click-to-scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#top-home").offset().top
        }, 1000);
    });
}) (jQuery);

    You needed to wrap the function in the curly braces. As well as close your opening parenthesis.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search