如何通过平滑滚动将Revolution Slider中的图像链接到同一页面上的div id?

时间:2017-02-24 22:07:32

标签: jquery css wordpress revolution-slider

我已经想出如何在Revolution Slider中为id或类提供图像。所以我给了一个图像一个类,然后将它链接到同一页面上的一个部分。然而,它是如此生涩,它只是跳到该部分。

我添加了一些jQuery来平滑转换,但它不起作用。我收到错误:     “未捕获的SyntaxError:意外的标识符”

它似乎是指我在Revolution Slider中给出图像的类,但我不明白为什么会有错误。我只是想让用户顺利地引导到页面的下一部分。这是我的jQuery:

(function($)

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

(jQuery);

我正在使用Divi主题,它允许您将JavaScript放入仪表板主题选项中的网站标题部分。该网站位于:customdesign.mgsites.net

非常感谢任何帮助。谢谢。

2 个答案:

答案 0 :(得分:1)

正确的语法是:

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

您需要将函数包装在花括号中。以及关闭你的左括号。

答案 1 :(得分:0)

因此经过大量的调整后,我发现我遇到问题的原因是因为旋转滑块在DOM之后加载,而不是其他所有东西。所以我添加了一个文档就绪函数,以确保调用jQuery(看起来它被忽略了)。它现在有效,所以如果有人再遇到这个问题,这就是你需要的代码。

<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>

我只把它放在主页的标题中。我使用了一个名为Header / Footer脚本的插件,它允许您将代码直接删除到单个帖子/页面的标题中,或者放在每个帖子/页面中。另外,请注意它包含在标签中,因为任何类型的代码都可以放在这里,所以我必须指定它是一个脚本而不是元,注释等。