使用Wordpress Visual Composer进行平滑锚点滚动onclick javascript操作按钮功能

Question

我正在使用Wordpress Visual Composer，并希望按钮可以平滑地向下滚动到同一页面上的特定部分。

我已经探索了标准按钮元素的“插入内联onclick javascript动作”，其中包含来自许多其他类似Q＆amp; As的锚ID和代码，但没有运气。有没有人专门针对Wordpress Visual Composer？

（以下是我尝试实施@Frits建议的截图。）

Button href

Raw JS block

Answer 1

将来，添加您当前的尝试是一个好主意，因为它可以帮助我们调整您的代码。你已经明确尝试了一些东西，它们显然不起作用（否则你不会来这里） - 向我们展示你尝试过的东西，我们也许可以帮助你解决当前的尝试！

无论如何，关于实际的代码。

看到你缺少一些信息，我将不得不做出一些假设。

我假设你有一个看起来像这样的按钮：

jQuery(document).ready(function($){
    $('.my-link, .my-link a').click(function(e){
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                jQuery('html, body').animate({
                    scrollTop: Math.ceil(target.offset().top) 
                }, 1000);
            return false;
            }
        }
    });
});

我将假设您已为视觉作曲家行提供了{{1}} 的ID（您可以在实际行本身的编辑选项下执行此操作）

如果您对使用jQuery没问题，那么您可以在某个地方（最好是页面底部）的RAW JavaScript块中实现以下内容，或者如果您正在创建自己的主题，则可以将其添加到您的.js文件。

{{1}}

这已经改编自CSS-Tricks平滑滚动解决方案，可以找到here。

Answer 2

我意识到这是一篇很老的文章，但这对我来说确实有用...

要在Visual Composer前端编辑器中实现此目的，请将锚点ID添加到要跳转到的行的“锚点”字段中。 在“行设置”对话框中，在“锚点”文本字段下，您会看到以下提示： “如果锚点是“联系人”，请使用“＃！/ contact”作为其平滑滚动链接。”

例如http://domainname.com/page-name/#!/contact

希望有帮助， 本