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

Question

我正在使用 Wordpress Visual Composer 并想要一个按钮来平滑向下滚动到同一页面上的特定部分。

我已经探索了标准按钮元素的 "insert inline onclick javascript action" 以及来自许多其他类似问答的锚点 ID 和代码，但没有成功。有人知道 Wordpress Visual Composer 的具体答案吗？

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

Button href

Raw JS block

Answer 1

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

无论如何，进入实际代码。

鉴于您遗漏了一些信息，我将不得不做出一些假设。

我假设您有一个如下所示的按钮：

<a href="#my-visual-composer-row-id" class="my-link">Click here to scroll down</a>

并且我假设您已经为视觉作曲家行指定了一个 ID my-visual-composer-row-id （您可以在实际行本身的编辑选项下执行此操作）

如果您可以使用 jQuery，则可以在某处（最好是页面底部）的 RAW JavaScript 块中实施以下操作，或者如果您正在制作您自己的主题，您可以将其添加到您的 .js 文件中。

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;
            }
        }
    });
});

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

Answer 2

我意识到这是一个很老的 post 但这对我有用...

要在 Visual Composer 前端编辑器中实现此目的，请将您的锚点 ID 添加到您要跳转到的行的锚点字段。在 Row Setting 对话框中，在 Anchor text 字段下，您可以看到一条提示： 'If anchor is "contact", use "#!/contact" as its smooth scroll link.'

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

希望对您有所帮助，本

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

Smooth anchor scrolling with Wordpress Visual Composer onclick javascript action button feature

wordpress

smooth-scrolling

visual-composer