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

问题描述 投票:2回答:1

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

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

(下面是我试图实现@Frits建议的截图。)

Button href

Raw JS block

wordpress smooth-scrolling visual-composer
1个回答
3
投票

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

无论如何,对实际的代码。

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

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

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

我假设您已经为视觉作曲家行提供了my-visual-composer-row-id的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

© www.soinside.com 2019 - 2024. All rights reserved.