Thomas McNish Thomas McNish -4 years ago 138
jQuery Question

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download